JQuery clearInterval（）增加了一個延遲

我正在爲我的網站製作一個照片滑塊，並沒有得到我以前的問題的任何答案，所以我設法弄明白自己。JQuery clearInterval（）增加了一個延遲

一切運行良好，但我有一個導航欄爲我的滑塊，並且當您單擊欄中的標題時，顯示與該標題相關的照片。我使用clearInterval（）來實現這一點，但是當你點擊時會造成延遲。因此，不是點擊標題而是立即切換圖片，幾秒鐘後，圖片顯示出來。我想避免這種延遲。有任何想法嗎？這裏是我的代碼：

HTML：

<body onload="slider();"> 
<div id="slider"> 
<div class="slider"> 
    <a href="#"><img id="1" src="2013Sealbeach.jpg" border="0" /></a> 
    <a href="#"><img id="2" src="sns-homeintro-WEB.jpg" border="0" /></a> 
    <a href="#"><img id="3" src="2013facebookad.jpg" border="0" /></a> 
</div> <!-- /.slider --> 

    <div class="sliderBar"> 
      <div id="one" class="sliderBarDiv"><p id="sliderBarNavs">Seal Beach Bodyboarding</p></div> 
      <div id="two" class="sliderBarDiv"><p id="sliderBarNavs">The Team</p></div> 
      <div id="three" class="sliderBarDiv"><p id="sliderBarNavs">Second Nature Skimboarding</p></div> 
    </div> <!-- /.sliderBar --> 
</div> <!-- /#slider --> 
</body>

CSS：

#sliderBarNavs /* the text for the slider bar */ 
{ 
    margin:auto; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:12px; 
    color:#999; 
    text-align:center; 
    padding:5px; 
} 
#sliderBarNavs:hover 
{ 
    color:#9CF; 
} 
#slider 
{ 
    width:750px; 
    height:536px; 
    float:left; 
    overflow:hidden; 
} 
.slider 
{ 
    width:750px; 
    height:486px; 
    overflow:hidden; 
    float:left; 
    background-image:url(Loading.gif); 
    background-repeat:no-repeat; 
    background-position:center; 
} 
.slider img 
{ 
    width:750px; 
    height:486px; 
    display:none; 
} 
.sliderBar 
{ 
    width:750px; 
    height:40px; 
    float:left; 
    background-color:#FFF; 
} 
.sliderBarDiv 
{ 
    width:140px; 
    height:40px; 
    float:left; 
    background-color:#FFF; 
    border-right:1px solid #CCC; 
    border-left:1px solid #CCC; 
    cursor:pointer; 
} 
.sliderBarDiv:hover 
{ 
    background-color:#f4f4f4; 
}

JQuery的：

function slider() { 
$(".slider #1").fadeIn(500); 
$(".slider #1").delay(5000).fadeOut(500); 

var sc=$(".slider img").size(); 
var count=2; 
var pause; 

pause = setInterval(function() { 
        $(".slider #"+count).fadeIn(500).delay(5000).fadeOut(500); 
        if(count==sc){ 
         count = 1 
        }else{ 
         count = count + 1; 
        } 
        }, 6000); 

$("#one, #two, #three").click(function(){ 
         clearInterval(pause); 
         }); 
} 

$(document).ready(function(){ // to navigate through the images once the setInterval has been cleared: 

$("#one").click(function(){ 
      $(".slider #1").fadeIn(500); 
         }); 
$("#two").click(function(){ 
      $(".slider #1").fadeOut(250); 
      $(".slider #2").fadeIn(250); 
         }); 
$("#three").click(function(){ 
      $(".slider #1").fadeOut(250); 
      $(".slider #3").fadeIn(250); 
         }); 
$("#three").click(function(){ 
      $(".slider #2").fadeOut(250); 
      $(".slider #3").fadeIn(250); 
         }); 
});

我所使用的圖片是本地文件，所以任何人誰幫助我這將需要使用來自在線的圖片，除了任何能夠幫助我的人都會很棒，這真是令人沮喪我在其他地方找不到答案。另外，我知道可能有更簡單的方法來編寫大部分JQuery以使其更加壓縮，但我對js和JQuery來說很新，所以這是我能做的最好的。謝謝！

來源

2013-07-01 samrap

事情是這樣的：http://jsfiddle.net/enve/C398M/ – Enve

@Enve不解決什麼我試圖解決的問題。在執行clearInterval（暫停）之後延遲不是問題，而是延遲清除間隔。如果這是有道理的 – samrap

當我們把代碼放入jsFiddle時，clearInterval不起作用，除onLoad之外沒有任何東西可以觸發它。你有我們可以使用的例子嗎？ –

jQuery中替換此代碼

$(".slider #1").delay(5000).fadeOut(500);

與此

setTimeout(function(){ 
    $(".slider #1").fadeOut(500); 
},5000)

，它會工作（測試）。

的jsfiddle：http://jsfiddle.net/enve/C398M/2/

來源

2013-07-02 00:21:54 Enve

真棒，完美的作品 – samrap

JQuery clearInterval（）增加了一個延遲

回答

相關問題