简单的轮播 - 上一个按钮的问题

时间:2014-06-24 16:41:38

标签: jquery carousel counter

我正在使用一个我发现尝试构建旋转木马的简单脚本。初始代码是从一个图像到下一个图像的自动动画过渡。我试图做类似的事情,而是使用上一个/下一个按钮。

下一个按钮工作正常,但我知道我没有使用prev按钮的错误语法。我不确定应该如何构造变量。

有人可以帮忙吗?

以下是我所指的一个例子:

(function($){
$.fn.MySlider = function(interval) {
    var slides;
    var cnt;
    var amount;
    var i;

    $('.prev').click(function(){
        $(slides[i]).fadeOut(1000);
        i--;
        if (i <= amount) i = 0;
        $(slides[i]).fadeIn(1000);

        // updating counter
        cnt.text(i+1+' of '+amount);

        // loop
        setTimeout(run, interval);
    });

    $('.next').click(function(){
        $(slides[i]).fadeOut(1000);
        i++;
        if (i >= amount) i = 0;
        $(slides[i]).fadeIn(1000);

        // updating counter
        cnt.text(i+1+' of '+amount);

        // loop
        setTimeout(run, interval);
    });

    slides = $('#my_slider').children();
    cnt = $('#counter');
    amount = slides.length;
    i=0;

    // updating counter
    cnt.text(i+1+' of '+amount);

    setTimeout(run, interval);
};
})(jQuery);

// custom initialization
jQuery(window).load(function() {
    $('.smart_gallery').MySlider(3000);
});

示例代码:http://jsfiddle.net/zd6D8/2/

1 个答案:

答案 0 :(得分:1)

试试这个:

 $('.prev').click(function(){
        $(slides[i]).fadeOut(1000);
        i--;
        if (i < 0) i = 0;
        $(slides[i]).fadeIn(1000);
        // updating counter
        cnt.text(i+1+' of '+amount);
        // loop
        setTimeout(run, interval);
    });

工作小提琴:http://jsfiddle.net/robertrozas/zd6D8/5/