图像滑块滑入/滑出

Question

我试图让第一张图像滑出第二张图片，第二张图片滑出，第三张图片滑入等等，因为代码代表每张图片滑出精细但渐渐消失而不是滑动。

var s = 0, 
    t = 2000; 

$(document).on('ready', slide); 

function slide(){ 
var speed = setInterval(slider, t); 
} 

function slider(){ 
s++; 
var sld = $('#slider img'), 
    imgs = sld.length; 
if(s == imgs){ 
s = 0; 
} 

sld.animate({'marginLeft': '+=750px'}, t).fadeOut('fast').animate({'marginLeft': '-=750px'}, t).eq(s).fadeIn(t); 
} 

jFiddle Demo

Answer 1

更换.fadeOut/.fadeIn我们应该使用一个无序列表（<ul>）首先改了一下结构：

<div id="slider"> 
    <ul> 
     <li><img src="http://placehold.it/750x250/75c8c8/fff&text=1"></li> 
     <li><img src="http://placehold.it/750x250/b775c8/fff&text=2"></li> 
     <li><img src="http://placehold.it/750x250/c8bd75/fff&text=3"></li> 
     <li><img src="http://placehold.it/750x250/c87575/fff&text=4"></li> 
    </ul> 
</div>​ 

然后我们应该使用setTimeout()而不是一个的setInterval所以可以肯定，一旦动画完成下一张幻灯片启动：

var s = 0, 
    t = 2000, 
    timer; 

$(document).on('ready', slide); 

function slide(){ 
    timer = setTimeout(slider, t); 
} 

function slider(){ 
    s++; 
    var sld = $('#slider li'), 
    imgs = sld.length; 
    if(s == imgs){ 
     s = 0; 
    } 
    sld.eq(s-1).animate({'left': '750px'}, t, function() { 
     sld.eq(s).animate({'left': '0px'}, t, function() { 
      speed = setTimeout(slider, t); 
     }); 
    }); 
} 

这种方式，我们函数再次滑动肖像权，那么下一个左最后调用`滑块（）超时。

为了使这项工作，我们需要改变的CSS代码：

#slider { 
    height:250px; 
    width:750px; 
    margin:20px auto; 
} 

#slider ul { 
    width: 100%; 
    height: 100%; 
    list-style: none; 
    overflow: hidden; 
    border: 1px solid grey; 
    position: relative; 
} 

#slider​ ul li { 
    position: absolute; 
    left: 750px; 
} 

#slider ul li​:first-child { 
    left: 0px; 
}​ 

在这里你可以看到一个DEMO

Answer 2

尝试使用.slideToggle

sld.animate({'marginLeft': '+=750px'}, t) 
    .slideToggle('fast') 
    .animate({'marginLeft': '-=750px'}, t) 
    .eq(s) 
    .slideToggle(t);