个人中心
gpt4 book ai didi

JQuery clearInterval() 正在添加延迟

转载 作者：太空宇宙 更新时间：2023-11-04 14:50:33 24 4
gpt4 key购买 nike

我正在为我的网站制作一个照片 slider ，但我之前的问题没有得到任何答案，所以我设法自己弄明白了。

一切正常，但我的 slider 有一个导航栏，当您单击栏中的标题时，会显示与该标题相关的照片。我正在使用 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 还很陌生，所以这是我能做的最好的。谢谢!

最佳答案

在 jQuery 中替换这段代码

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

有了这个

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

它会起作用(经过测试)。

jsFiddle:http://jsfiddle.net/enve/C398M/2/

关于JQuery clearInterval() 正在添加延迟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17415247/

24 4 0
文章推荐： java - 使用 elemma 的单个测试文件的代码覆盖率？
文章推荐： java - 我如何使用 LingPipe Tools 提取阿拉伯命名实体
文章推荐： java - 使用 JZMQ 与 EPGM 传输不发送或接收数据
文章推荐： html - 无法在工具提示菜单上设置圆 Angular 边框
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com