jquery幻灯片显示div
问题描述:
我想创建一个文本内容的多个div,我可以幻灯片显示和隐藏div没有任何按钮使用jQuery。 (比如翻阅一本书的页面)。例如,圣经应用程序可以滑动显示下一章和前一章。 例如:jquery幻灯片显示div
答
这是一个示例滑动没有使用任何按钮使用jQuery。
$(document).ready(function(){
$('#content1').addClass('addbdr1');
$('#content1').show();
$('#content2').hide();
$('#content3').hide();
function slider(){
setTimeout(function(){
$('#content1').hide(0);
$('#content3').fadeOut();
$('#content2').addClass('addbdr');
$('#content2').slideDown();
},1000);
setTimeout(function(){
$('#content1').fadeOut();
$('#content2').fadeOut();
$('#content3').addClass('addbdr1');
$('#content3').slideDown();
},4000);
setTimeout(function(){
$('#content2').fadeOut();
$('#content3').fadeOut();
$('#content1').addClass('addbdr1');
$('#content1').slideDown();
},6000);
}
slider();
setInterval(function(){
slider();
},8000);
});
.slide{
position:absolute;
left:10%;
top:10%;
width:100px;
height:100px;
border:1px solid;
text-align:center;
padding-top:10%;
}
.addbdr{
border:1px solid green;
color:red;
}
.addbdr1{
border:1px solid #600;
color:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide" id="content1">content1</div>
<div class="slide" id="content2">content2</div>
<div class="slide" id="content3">content3</div>
哪里是你的代码 –