1

Hi I'm creating a simple jQuery slide show. The requirement for the slide is simple, just the slide just flip continuously towards the left. Most of the tutorial shown on line is pretty advanced and fancy. But then I came across one that is pretty much almost what I want.

http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/index.php

But the problem is when the image slides to the end it will slide backward to my first image. Is there any way that I can change the code so that when the image is slid to the end, the slide will keep on back to first image but not by slide backward.

4

2 回答 2

1

如果您需要避免最后一张幻灯片回到第一张并重新开始，我建议对 Pushpesh 的回答稍作改动：

$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 900;
var lastSlideReached = false;

slides.wrapAll('<div id="slidesHolder"></div>');
slides.css({ 'float' : 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
slideShowInterval = setInterval(changePosition, speed);

function changePosition() {
    if( ! lastSlideReached ) {
        if(currentPosition == (numberOfSlides-1)) {
            lastSlideReached = true;
        } else {
            currentPosition++;
        }

        moveSlide();

    } else {                     
        resetSlide()
    }


}

function moveSlide() {
    $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
}

function resetSlide(){
    currentPosition = 0;
    $('#slidesHolder').css('marginLeft', currentPosition );
    lastSlideReached = false;

}

});​</p>

干杯

于 2012-10-30T11:35:30.037 回答
0

请将您的 javascript 更改为：

更新：您希望滑块在到达幻灯片后滑回原始位置。slideLeft一旦到达最后一张幻灯片，该功能就可以实现这一点。

$(document).ready(function() {
    var currentPosition = 0;
    var slideWidth = 500;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 3000;
    var lastSlideReached = false;

    slides.wrapAll('<div id="slidesHolder"></div>');
    slides.css({ 'float' : 'left' });
    $('#slidesHolder').css('width', slideWidth * numberOfSlides);
    slideShowInterval = setInterval(changePosition, speed);

    function changePosition() {
        if( ! lastSlideReached ) {
            if(currentPosition == (numberOfSlides-1)) {
                lastSlideReached = true;

                            clearInterval( slideShowInterval );
                slideLeft();
            slideShowInterval = setInterval(changePosition, speed);
            } else {
                currentPosition++;
            }
        } else {
            if( currentPosition == 0 ) {
                lastSlideReached = false;
            } else {
                currentPosition--;
            }
        }

        moveSlide();
    }

    function moveSlide() {
         $('#slidesHolder').animate(
            {'marginLeft' : slideWidth*(-currentPosition)}
         );
    }

function slideLeft() {
    $('#slidesHolder').animate({'marginLeft' : 0});
    currentPosition = 0;
    lastSlideReached = false;
}
});

我添加了一个变量var lastSlideReached = false;并对函数进行了一些更改changePosition。

希望能帮助到你。

于 2012-10-30T10:24:45.043 回答