jquery 停止/启动滑块按钮

Question

我正在寻找一个简单任务的解决方案。如何编程按钮以停止/开始幻灯片。 我制作了 startSlider、stopSlider 函数，当我保存更改时，按钮消失了。

    $('#stopStartBtn').toggle(
        function(e){ e.preventDefault();
            stopSlider()}, 
        function(e){ e.preventDefault();
            startSlider();}
        );

除此之外，滑块会在悬停时做出反应（停止/开始）并在文档准备好时开始。

HTML：

<div id="slider">
    <ul class="slides">
        <li class="image" rel="Image 01"><img src="http://dummyimage.com/720x400/000/fff.png" alt="#"></li>
        <li class="image" rel="Image 02"><img src="http://dummyimage.com/720x400/000766/0011ff.png" alt="#"></li>
        <li class="image" rel="Image 03"><img src="http://dummyimage.com/720x400/c9c9c9/0011ff.png" alt="#"></li>
        <li class="image" rel="Image 04"><img src="http://dummyimage.com/720x400/000/fff.png" alt="#"></li>
        <li class="image" rel="Image 05"><img src="http://dummyimage.com/720x400/c9c9c9/0011ff.png" alt="#"></li>
        <li class="image" rel="Image 06"><img src="http://dummyimage.com/720x400/000766/0011ff.png" alt="#"></li>
    </ul><!--./slides-->
</div><!--./slider-->
<button id="stopStartBtn">Stop/Start</button>

JS：

$(function(){
    //configuration
    var width = 720,
        animationSpeed = 1000,
        pause = 500,
        currentImage = 1,
        interval;

    //cache DOM
    var $slider = $('#slider'),
        $slideContainer = $slider.find('.slides'),
        $image = $slideContainer.find('.image');

    //setInterval
    function startSlider() {
        interval = setInterval(function(){
            $slideContainer.animate({'margin-left': '-='+width},animationSpeed, function(){
                currentImage++;
                //if it's last slide go to position 1 (0px)
                if(currentImage === $image.length) {
                    currentImage = 1;
                    $slideContainer.css('margin-left',0);
                }
            });
        },pause);//setInterval
    }//startSlider

    function stopSlider() {
        clearInterval(interval);
    }//stopSlider

    //hover stop/start
    $slider.on('mouseenter',stopSlider).on('mouseleave',startSlider);

    $('#stopStartBtn').toggle(
        function(e){ e.preventDefault();
            stopSlider();}, 
        function(e){ e.preventDefault();
            startSlider();}
        );

    startSlider();
});//ready

Answer 1

给你：DEMO

var started=true;
$('#stopStartBtn').click(function(){
    if(started){
        stopSlider();
        started=false;
    }
    else{
        startSlider();
        started=true;
    }
});

说明：

toggle()功能是隐藏或显示一个元素，你不能用它来创建一个切换按钮，你可以做的是使用答案代码中提到的变量来模拟切换动作。

另外，pause 变量必须等于 animationSpeed 变量。