Question

我使用jQuery创建了一个非常简单的幻灯片。幻灯片显示工作正常，但是当它在最后一张照片时，我希望它循环到第一张照片，而不是动画到第一张照片，它只是跳跃而没有任何动画，其余的照片工作正常。希望有人可以帮我解决这个问题。

感谢。

HTML code：

<div class="slideshow">
        <ul class="slider">
            <li class="slide"><img src ="imgs/model_05.jpg"></li>
            <li class="slide"><img src ="imgs/model_06.jpg"></li>
            <li class="slide"><img src ="imgs/model_07.jpg"></li>
            <li class="slide"><img src ="imgs/model_08.jpg"></li>
        </ul>
</div>

CSS代码：

.slideshow {
    clear: both;
    width:400px;
    height:400px;
    border: 1px solid black;
    overflow: hidden;
}

.slideshow .slider {
    width:2000px;
    height:400px;
}

.slideshow .slider .slide {
    list-style: none;
}

.slideshow .slider .slide img{
    width:400px;
    height:400px;
    float:left;
}

jQuery代码：

var sliderWidth = 400;
var animationSpeed = 1000;
var sliderPaused = 3000;
var currentSlide = 1;

//cache DOM
var $slideShow = $(".slideshow")
var $slider = $slideShow.find(".slider")
var $slides = $slider.find(".slide");

setInterval(function () {

    $slider.animate({
        marginLeft: "-=" + sliderWidth
    }, animationSpeed, function () {

        currentSlide++;
        if (currentSlide === $slides.length) {
            currentSlide = 1;
            $slider.css("margin-left", 0);
        }

    });

}, sliderPaused);

Answer 1

因为您在currentSlide is==1时没有制作动画。

试用此代码 -

if (currentSlide === $slides.length) {
        currentSlide = 1;
        $slider.animate({
            marginLeft : 0
        });
    }

jQuery幻灯片 - 最后一张照片不会循环到第一张带有动画

1 个答案: