jquery更改點擊和完成點擊功能的時間間隔重置爲默認值

Question

我有一個自定義內容滑塊，滑塊每5秒後發生一次。該滑塊還具有Next和Prev功能。

1. 當我點擊旁邊的幻燈片不會立即發生：

   問題。

2. 點擊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; 
} 

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

嗯，我做輕微的更新您function這是如下：

見聯註釋

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

Answer 2

你建議立即進行刪除移動你的代碼setPrev和setNext功能。他們應該與startSlider功能在同一層次上。你也應該$('#prev-slide').click(function(){後清除間隔和$('#next-slide').click(function(){