0

我想用简单的分页制作简单的 jQuery 渐变轮播。
一切正常。但是当我单击NEXT按钮时，轮播每次都会返回到第一项。

如何解决这个问题？

小提琴

如果小提琴过时，请参阅我的 HTML：

<body>    
    <ul id="carousel">
        <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide1.jpg" width="960" height="375" alt="image 1" /></li>
        <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide2.jpg" width="960" height="375" alt="image 2"  /><li>
            <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide3.jpg" width="960" height="375" alt="image 3"  /></li>
            <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide4.jpg" width="960" height="375" alt="image 4"  /></li>
            <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide5.jpg" width="960" height="375" alt="image 5"  /></li>
    </ul>
<span class="prev">prev</span>
<span class="next">next</span>
</body>

和脚本：

$(document).ready(function() {
    slideShow();
});

function slideShow() {
    var showing = $('#carousel .is-showing');
    var next = showing.next().length ? showing.next() : showing.parent().children(':first');

    showing.fadeOut(800, function() {
        next.fadeIn(800).addClass('is-showing');
    }).removeClass('is-showing');
    setTimeout(slideShow, 5000);

    $(".next").click(function() {
        showing.fadeOut(800, function() {
            next.fadeIn(800).addClass('is-showing');
        }).removeClass('is-showing');
    })
}​
4

2 回答 2

2

你需要重写一些代码来解决这个问题。拆分函数中的重复动作。

固定示例

新脚本：

$(document).ready(function() {
    slideShow();
});

function slideShow() {
    var slides = $('#carousel li');
    var previousIndex = 0,
        currentIndex = 0,
        timer;
    slides.hide().removeClass('is-showing').eq(currentIndex).show().addClass('is-showing');

    function nextSlide() {
        previousIndex = currentIndex;
        if (currentIndex < slides.length - 1) currentIndex++;
        else currentIndex = 0;
        switchSlides();
    }

    function switchSlides() {
        slides.eq(previousIndex).removeClass('is-showing').fadeOut(300, function() {
            slides.eq(currentIndex).addClass('is-showing').fadeIn(300);
            autoRotate();
        });
    }

    function autoRotate() {
        clearTimeout(timer);
        timer = setTimeout(nextSlide, 5000);
    }

    autoRotate();
    $(".next").click(nextSlide);
}​
于 2012-10-07T14:39:55.687 回答
1

因为当你淡出时你删除了“is-showing”类，所以对于那些 800ms 没有“is-showing”类

showing.fadeOut(800, function() {
    next.fadeIn(800).addClass('is-showing');
}).removeClass('is-showing');

所以当它到达这个代码时，没有“当前项目”，所以它会按照你的逻辑进入第一个项目

var showing = $('#carousel .is-showing');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');
于 2012-10-07T14:41:52.603 回答