Question

目前正在制作一个图像轮播，我相信它完成了99％，除了一件事......我一次只能移动一张图片，然后我必须重新加载以保持滑块的运行。那么是否有某种跳转语句或goto语句可以用来连续运行循环？

这是我到目前为止所做的：

Fiddle

JQuery的

$(document).ready(function(){
    $('.carousel').each(function(){
        if($(this).width() < $(this).children('ul').width()){
            $(this).children('carrow').each(function(){
                $(this).hide();
            });
        }
    });

    $('.carousel').hover(function(){
        $(this).children('.carrow').each(function(){
            $(this).addClass('carrow-hover');
        });
    }, function(){
        $(this).children('.carrow').each(function(){
            $(this).removeClass('carrow-hover');
        });
    });

    $('.carrow').hover(function(){
        var SD = 210;   
        var $carousel = $(this).parent();
        var $ul = $carousel.children('ul');
        var distance = SD;
        var time = 2500;
        var rate = distance/time;

        //When animation is completed, Jump back to here

        distance = Math.abs($ul.position().left);

        if($(this).hasClass('left-arrow')){
            if(distance == 0) {
                $ul.css({left: -210});
                $ul.prepend($ul.children('li:last-child'));
            } else {
                time = distance/rate;
            }
            $ul.stop().animate({
                left: 0
            }, time, 'linear');
        }
        else if($(this).hasClass('right-arrow')){
            if(distance != 0){
                distance = SD - distance;

                time = distance/rate;
            }
            $ul.stop().animate({
                left: -210
            }, time, 'linear', function(){
                $ul.append($ul.children('li:first-child'));
                $ul.css({left: 0});
            });
        }   
    }, function(){
        $(this).parent().children('ul').stop();
    });
});

Answer 1

您可以在其自己的功能中分离动画例程，例如

function myAnimate(that){
// animation goes here
}

并将自己称为动画结束时的回调函数

$ul.stop().animate({
   left: 0
}, time, 'linear', function(){myAnimate(that)});

这样一旦一个动画结束 - 另一个动画开始

演示：http://jsfiddle.net/bjyuA/1/

Answer 2

我所做的只是循环我想要的部分并创建了一些Yuriy修复过的额外依赖项，但我想我也会分享我的方法。

$('.carrow').hover(function(){
    var SD = 210;
    var $this = $(this);
    var $carousel = $(this).parent();
    var $ul = $carousel.children('ul');
    var distance = SD;
    var time = 2500;
    var rate = distance/time;

    distance = Math.abs($ul.position().left);

    continue_scroll = function(dist) {
        time = 2500;
        if(arguments.length != 0){
            distance = dist;
        }

        if($this.hasClass('left-arrow')){
            if(distance == 0) {
                time = 2500;
            } else {
                time = distance/rate;
            }
            $ul.stop().animate({
                left: 0
            }, time, 'linear', function(){
                $ul.prepend($ul.children('li:last-child'));
                $ul.css({left: -210});
                continue_scroll(210);
            });
        }
        else if($this.hasClass('right-arrow')){
            if(distance != 0 && arguments.length == 0){
                distance = SD - distance;                   
                time = distance/rate;
            }
            $ul.stop().animate({
                left: -210
            }, time, 'linear', function(){
                $ul.append($ul.children('li:first-child'));
                $ul.css({left: 0});
                continue_scroll(0);
            });
        }
    }

    continue_scroll();

}, function(){
    $(this).parent().children('ul').stop();
});

JQuery连续图像轮播一次只能移动一个图像？

Fiddle

JQuery的

2 个答案: