Question

我正在制作幻灯片，不断循环播放5张图片等。我让它循环播放，但循环不会启动和停止。我正在使用pause = true / false变量并在整个代码中添加if语句 - 不是很好看或效率很高（从示例中取出）。如果循环在语句等之后暂停，它会破坏动画并且图像会丢失。

有没有像这样控制循环的标准方法？

function setupSlideShow(){
    // Setup SlideShow stuff here then start the loop
    slideBoxTransition()
}

var page = 1;
function slideBoxTransition(){
    switch (settings['transition']['effect']){
        case "slide" :
            next.css({left:settings['width']+"px",top:0,display:"block"});
            current.animate({left: "-="+width+"px"}, {duration : speed, easing : easing, queue : false});
            next.animate({left: "-="+width+"px"}, {duration : speed, easing : easing, queue : false, complete : function(){
                current.css("display","none")
                slideBoxGetImage();
            }});
            break;
    }
}

function slideBoxGetImage(){
    current = $self.eq($self.index(next))
    page += 1;
    if(page < $self.length){
        next = $self.eq( $self.index(current) + 1 );
    }else{
        page = 0;
        next = $self.first();
    }
    slideBoxTimeout();
}

function slideBoxTimeout(){
    setTimeout(function(){
        slideBoxTransition();
    }, delay);
}

任何事情都会非常感激！

感谢。

Answer 1

var interval;
function slideBoxTimeout(){
    var interval = setInterval(function(){
        slideBoxTransition();
    }, delay);
}

$(".play").click(function() {
    slideBoxTimeout();
});
$(".pause").click(function() {
    clearInterval(interval);
});

取自：jQuery play/pause jQuery function

点击停止/开始动画循环？ jQuery的

1 个答案: