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

尝试使用.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>

然后我们应该使用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);
        });
    });
}

这样我们向右滑动图像，然后向下滑动图像，最后再次调用`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

图像滑块滑入/滑出

2 个答案: