jquery 更改点击时间间隔以及点击功能完成后重置回默认值

Question

我有一个自定义内容滑块，它每隔 5 次播放一次 seconds.The 滑块还具有下一个和上一个功能。

问题：

当我点击下一步时，幻灯片不会立即出现。
点击next/prev后滑块开始快速滑动

我想做的事情：

1.When我点击next/prev我想让滑块立即滑动而不用等待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;
}

js

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

JSFIDDLE here

Answer 1

您应该将代码移至 setPrev 和 setNext 函数。它们应该与 startSlider 函数处于同一级别。您还应该在 $('#prev-slide').click(function(){ 和 $('#next-slide').click(function(){

之后清除间隔

Answer 2

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

See inline comments

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

jquery 更改点击时间间隔以及点击功能完成后重置回默认值

jquery change time interval on click and when click function is done reset back to default

html

javascript

css

jquery

slider