jquery幻灯片显示div答案

【问题标题】：jquery slide to show divsjquery幻灯片显示div
【发布时间】：2016-08-08 14:52:51
【问题描述】：

我想创建一个包含文本内容的多个 div，我可以使用 jquery 滑动以显示和隐藏 div，而无需任何按钮。（就像翻阅一本书的页面）。例如，圣经应用程序的幻灯片显示下一章和上一章的方式。示例：

【问题讨论】：

你的代码在哪里

【解决方案1】：

这是一个不使用任何按钮的滑动示例，使用 with 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>

【讨论】：