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（）增加了一个延迟

回答

相关问题