jquery在点击时更改时间间隔，当点击功能完成时重置为默认值答案

【问题标题】：jquery change time interval on click and when click function is done reset back to defaultjquery在点击时更改时间间隔，当点击功能完成时重置为默认值
【发布时间】：2015-11-07 15:58:45
【问题描述】：

我有一个自定义内容滑块，每 5 秒滑动一次。滑块还具有 Next 和 Prev 功能。

问题：

当我单击下一步时，幻灯片不会立即发生。
点击下一个/上一个后，滑块开始快速滑动。

我想做的事：

1.当我单击下一个/上一个时，我希望滑块立即滑动，而无需等待 5 秒间隔。当幻灯片完成时，将时间间隔重置为默认值，即 5 秒。

<div id="content-slide">
    <div id="content-slide-container">
        <div class="content content-1"><h2>1</h2></div>
        <div class="content content-2"><h2>2</h2></div>
        <div class="content content-3"><h2>3</h2></div>
        <div class="content content-4"><h2>4</h2></div>
        <div class="content content-5"><h2>5</h2></div>
        <div class="content content-6"><h2>6</h2></div>
        <div class="content content-7"><h2>7</h2></div>
        <div class="content content-8"><h2>8</h2></div>
        <div class="content content-9"><h2>9</h2></div>
        <div class="content content-10"><h2>10</h2></div>
        <div class="content content-11"><h2>11</h2></div>
        <div class="content content-12"><h2>12</h2></div>
        <div class="content content-13"><h2>13</h2></div>
        <div class="content content-14"><h2>14</h2></div>
        <div class="content content-15"><h2>15</h2></div>
        <div class="content content-16"><h2>16</h2></div>
    </div>
</div>
<div id="navigation">
    <span id="prev-slide">Prev</span>
    <span id="next-slide">Next</span>
</div>

css

#content-slide {
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
#content-slide-container{
    width: 3200px;
    height: 100px;
}
.content {
    width: 200px;
    height: 100px;
    background-color: #FF1493;
    float: left;
}
.content h2{
    font-size: 25px;
    text-align: center;
}
#navigation{
    width: 800px;
    height: 20px;
    margin: 0 auto;
}
#prev-slide{
    width: 100px;
    height: 20px;
    float: left;
    background-color: #000000;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
}
#next-slide{
    width: 100px;
    height: 20px;
    float: right;
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
}

$(document).ready(function(){
    var foo = {
        content_width   : 200,
        box             : $("#content-slide-container"),
        interval        : 0,
        counter         : 1,
        pause           : 5000,
        bar             : false
    };
    function startSlider(){
        foo.interval = setInterval(function(){
            // Next
            if(foo.bar){
                foo.box.animate({'marginLeft':'+='+(foo.content_width)});
                foo.counter--;
                if(foo.counter<= 1){
                    foo.bar = false;
                }
            // Prev
            }else{
                foo.box.animate({'marginLeft':'-='+(foo.content_width)});
                foo.counter++;
                if(foo.counter>=16){
                    foo.bar = true;
                }
            }

        },foo.pause);
    }   
    startSlider();
    function pauseSlider(){
        clearInterval(foo.interval);
    }   
    foo.box.on('mouseenter',pauseSlider).on('mouseleave',startSlider);

    $('#prev-slide').click(function(){
        if(foo.counter>1){
            foo.bar = true;
            startSlider();
        }
    });
    $('#next-slide').click(function(){
        if(foo.counter<16){
            foo.bar = false;
            startSlider();
        }
    });
});

JSFIDDLEhere

【问题讨论】：

16 ?为什么不使用 JS 数幻灯片？
@RokoC.Buljan 是的，我会这样做的。谢谢
jsbin.com/dugazi/edit?html,css,js,console,output（不完全相同的动画行为，只是为了分享）
@RokoC.Buljan 感谢分享这是一个不错的滑块

标签： javascript jquery html css slider

【解决方案1】：

好吧，我对您的function 做了一些更新，如下所示：

查看内联 cmets

DEMO

$(document).ready(function(){
    var foo = {
        content_width   : 200,
        box             : $("#content-slide-container"),
        interval        : 0,
        counter         : 1,
        pause           : 5000,
        bar             : false
    };
    function startSlider(){
        foo.interval = setInterval(function(){
            // Next
            if(foo.bar){
                slideLeft()//keep sliding left in a separate function
            // Prev
            }else{
                slideRight()////keep sliding right in a separate function
            }

        },foo.pause);
    }   

    //2 new functions for slideLeft and slideRight
    function slideLeft(){
        foo.box.animate({'marginLeft':'+='+(foo.content_width)});
        foo.counter--;
        if(foo.counter<= 1){
            foo.bar = false;
        }   
    }
    function slideRight(){
        foo.box.animate({'marginLeft':'-='+(foo.content_width)});
                foo.counter++;
                if(foo.counter>=16){
                    foo.bar = true;
        }
    }
    //end
    startSlider();
    function pauseSlider(){
        clearInterval(foo.interval);
    }   
    foo.box.on('mouseenter',pauseSlider).on('mouseleave',startSlider);

    $('#prev-slide').click(function(){
        if(foo.counter>1){
            foo.bar = true;
            pauseSlider(); //on click clear interval
            slideLeft() //call slideLeft
            startSlider() //start the slide again with interval
        }
    });
    $('#next-slide').click(function(){
        if(foo.counter<16){
            foo.bar = false;
            pauseSlider() //on click clear interval
            slideRight() //slide Right
            startSlider() //start it again
        }
    });
});

【讨论】：

任何时候.. 快乐编码.. :)

【解决方案2】：

您应该将代码移至 setPrev 和 setNext 函数。它们应该与 startSlider 函数处于同一水平。你也应该在$('#prev-slide').click(function(){和$('#next-slide').click(function(){之后清除间隔

【讨论】：