0

我正在为我的网站制作照片滑块，但我之前的问题没有得到任何答案，所以我自己设法弄清楚了。

一切运行良好，但我的滑块有一个导航栏，当您单击栏中的标题时，会显示与该标题相关的照片。我正在使用 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;
}

查询：

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 很陌生，所以这是我能做的最好的。谢谢！

4

1 回答 1

1

在 jQuery 中替换此代码

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

有了这个

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

它会起作用（经过测试）。

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

于 2013-07-02T00:21:54.440 回答