在点击时停止/启动动画循环? jQuery的 [英] stop/start animation loop on click? jquery

问题描述

我正在制作一个连续循环播放5张图像等的幻灯片.我使它循环播放得很好，但是循环不会开始和停止.我使用的是pause = true/false变量，并在整个代码中添加了if语句-外观不太好或效率不高(从示例中删除).如果在语句等之后暂停循环，则会破坏动画，并丢失图像.

I am making a slideshow that continuously loops through 5 images etc. I have it looping fine but the loop won't start and stop. I was using a pause = true/false variable and adding if statements throughout the code - not very good looking or efficient (took it out of an example). It would spoil the animations and images would go missing if the loop paused after the statements etc.

是否有控制这种循环的标准方法?

Are there any standard methods for controlling loops like this?

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);
}

任何事情将不胜感激！

谢谢.

推荐答案

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

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

摘自: jQuery播放/暂停jQuery函数

这篇关于在点击时停止/启动动画循环? jQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！