jquery幻灯片显示div

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>