Question

我正在寻找一个简单任务的解决方案。如何编程按钮停止/开始幻灯片放映。我创建了startSlider，stopSlider函数，当我保存chnges时，按钮消失了。

    $('#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变量。

jquery停止/启动滑块按钮

1 个答案: