Question

对于这个“照片图像”滑块，我几乎就在那里：http://jsfiddle.net/4z4Lok9y/1/

当我进入幻灯片3并点击“下一步”时，我希望它返回到幻灯片1.（没有跳过幻灯片2，“生涩的动作”。

同样的，当我在幻灯片1上并点击“prev”时，我想跳到幻灯片3而没有跳跃。

修复此动作的jsfiddle的最简单，最简单的方法是什么？

$(document).ready(function(){
    var slides = $('.js-slide');
    var i = 0;
    $('.navigation a.nav-right').click(function(){
    i = ++i % slides.length;
    $('.slide-wrapper').animate(
    {
        'left' : -(slides.eq(i).position().left)},300);
    });
    $('.navigation a.nav-prev').click(function(){
    i = --i % slides.length;
    $('.slide-wrapper').animate(
    {
        'left' : -(slides.eq(i).position().left)},300);
    });
});

谢谢，

Answer 1

也许就像这个http://jsfiddle.net/4z4Lok9y/2/

$(document).ready(function(){
        var slides = $('.js-slide');
        var i = 0;
        $('.navigation a.nav-right').click(function(){
            i = ++i % slides.length;

            if(i==0)
            {
                var l=0                
                $('.slide-wrapper').css('left',l);
                return;
            }

            $('.slide-wrapper').animate({
                'left' : -(slides.eq(i).position().left)},300);
        });

        $('.navigation a.nav-prev').click(function(){
            i = --i % slides.length;

            if(i==-1)
            {
                var l=-slides.eq(i).position().left                
                $('.slide-wrapper').css('left',l);
                return;
            }

            $('.slide-wrapper').animate({
                'left' : -(slides.eq(i).position().left)},300);
            });

});

Answer 2

我假设您希望它在第一张和最后一张幻灯片之间进行动画处理，但不要在两者之间显示幻灯片。这允许您拥有任意数量的幻灯片（在合理范围内），并保持平滑的动画效果。

要执行此操作，您需要隐藏其间的幻灯片，然后设置动画。然后在动画后直接取消隐藏所有幻灯片。

JSFiddle Demo

$(document).ready(function(){
        var slides = $('.js-slide');
        var i = 0;
        $('.navigation a.nav-right').click(function(){
            i = ++i % slides.length;

            //if we're going from the last slide to the first, hide all the slides
            //and re-position the slide-wrapper
            if (i ==0) {
                $('.module-body').not(':first').not(':last').css('display','none');
                $('.slide-wrapper').css('left', -(slides.eq(-1).position().left));
            }

            $('.slide-wrapper').animate(
            {
                'left' : -(slides.eq(i).position().left)
            },300, function() {
                //After we finish animating be sure to show the slides again
                //you could wrap this in a if statement if you wanted, to only try displaying
                //the slides if i is 0. Might save a bit, but for the example I didn't bother with
                //optimizations.
                $('.module-body').not(':first').not(':last').css('display','block');
            });
        });
        $('.navigation a.nav-prev').click(function(){
            i = --i % slides.length;

            if (i == -1) {
                $('.module-body').not(':first').not(':last').css('display','none');
                $('.slide-wrapper').css('left', -(slides.eq(0).position().left));
            }

            $('.slide-wrapper').animate(
            {
                'left' : -(slides.eq(i).position().left)
            },300, function() {
                $('.module-body').not(':first').not(':last').css('display','block');
                if (i == -1) {
                    $('.slide-wrapper').css('left', -(slides.eq(-1).position().left));
                }
            });
        });
});

连续JS滑块

2 个答案: