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

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 にかなり慣れていないので、それが最善の方法です。ありがとう！

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 に答える