Question

我想创建一个带有文本内容的多个div，我可以滑动显示和隐藏div而不使用任何按钮使用jquery。（就像浏览一本书的页面一样）。例如，圣经应用程序被滑动以显示下一章和前一章的方式。例如：

Answer 1

这是使用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>

jquery幻灯片显示div

1 个答案: