jquery - 图像滑块滑入/滑出

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 演示

Answer 1

尝试用 .slideToggle 替换 .fadeOut/.fadeIn

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

Answer 2

我们应该首先使用无序列表 ( <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>​

然后我们应该使用 asetTimeout()而不是 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);
        });
    });
}

这样，我们将图像向右滑动，然后向左滑动下一张，最后再次调用“slider()”函数并超时。

为了完成这项工作，我们需要像这样更改 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