2014-09-22 35 views
1

我想做一个垂直的jQuery时间内容滑块。我有五个部分,每个部分都有自己的ID和“部分”类,在一个“持有人”类的div中。到目前为止,我有这个js代码,但是所有的部分似乎都一下子滑了下来,并且出现错误。如何制作一个jquery垂直定时内容滑块?

$(document).ready(function(){ 

$('#section1, #section2, #section3, #section4, #section5').hide('fast'); 

}); 

$('.holder #section1').show('slow').delay(3000); 
$(this).slideUp('fast'); 
$(this).nextUntil(['#section5']).show('slow').delay(3000); 

回答

1

为什么不试试下面这个非常简单的定时幻灯片!我喜欢它!

$(function(){ 
 
    $('.fadein img:gt(0)').hide(); 
 
    setInterval(function(){ 
 
     $('.fadein :first-child').fadeOut() 
 
     .next('img').fadeIn() 
 
     .end().appendTo('.fadein');}, 
 
     3000); 
 
});
fadein { position:relative; width:500px; height:332px; } 
 
.fadein img { position:absolute; left:0; top:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="fadein"> 
 
    <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"> 
 
    <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"> 
 
    <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"> 
 
</div>