0

画像スライダーと、1つの画像をフェードインし、5秒間遅延してから、フェードアウトする機能があります。

JQueryを介して生成されたボタンをクリックすると、特定の画像に直接切り替えることができます。現在の画像は前にフェードアウトされます。選択した画像が表示されたら、その時点からスライドショーを続行します。

問題：直接アクセスボタンの1つをクリックすると、遅延が大幅に短くなります。なぜそれが起こっているのか分かりませんか？

コード：

$(document).ready(function(){
  var index = 0;

  var bilder=[
    ["HA_Promo_1.jpg","(a Link here)"],
    ["HA_Promo_2.jpg","(a Link here)"],
    ["HA_Promo_3.jpg","(a Link here)"],
    ["HA_Promo_4.jpg","(a Link here)"],
    ["HA_Promo_5.jpg","(a Link here)"],
    ["HA_Promo_6.jpg","(a Link here)"]
  ];

  $(bilder).each(function() {
    $("#linkleiste").append("<span class=\"klick\">" + ($(bilder).index(this)+1) + "</span>");
  });

  $(".klick").click(function() {   
    index=$(this).text();  
    $("#promo_slider").clearQueue().fadeOut(500,runIt);
  });

  function runIt() {
    $(".blink").remove();
    if(index==bilder.length) index=0;
    diesbild="<a class=\"blink\" id=\"" + "promo_a" + index + "\" href=\"" + bilder[index][1]+ "\"><img src=\"./images/" + bilder[index][0]+ "\" alt=\"\" title=\"\" /></a>";        
    index++;        
    $("#promo_slider").append(diesbild).fadeIn(500).delay(5000).fadeOut(500, runIt);
  }  
  runIt();
});
4

1 に答える 1

1

delay（）の代わりにsetTimeout（）を使用すると、より良い結果が得られました。どうやら、stop（）は遅延をキャンセルしません。ドキュメントから：

.delay（）メソッドは、キューに入れられたjQueryエフェクト間の遅延に最適です。制限があるため（たとえば、遅延をキャンセルする方法はありません）、.delay（）はJavaScriptのネイティブsetTimeout関数の代わりにはなりません。これは、特定のユースケースに適している場合があります。

以下のデモンストレーションスニペ​​ット：

$(document).ready(function() {
  var index = 0;
  var loopTimer;

  var bilder = [
    ["http://lorempixel.com/200/200/abstract/1/", "(a Link here)"],
    ["http://lorempixel.com/200/200/abstract/2/", "(a Link here)"],
    ["http://lorempixel.com/200/200/abstract/3/", "(a Link here)"],
    ["http://lorempixel.com/200/200/abstract/4/", "(a Link here)"],
    ["http://lorempixel.com/200/200/abstract/5/", "(a Link here)"],
    ["http://lorempixel.com/200/200/abstract/6/", "(a Link here)"]
  ];

  $(bilder).each(function() {
    $("#linkleiste").append("<span class=\"klick\">" + ($(bilder).index(this) + 1) + "</span>");
  });

  $(".klick").click(function() {
    clearTimeout(loopTimer);
    index = $(this).text() - 1;
    runIt();
  });

  function runIt() {
    if (index == bilder.length) index = 0;
    diesbild = "<a class=\"blink\" id=\"" + "promo_a" + index + "\" href=\"" + bilder[index][1] + "\"><img src=\"" + bilder[index][0] + "\" alt=\"\" title=\"\" />" + (index + 1) + "</a>";
    index++;
    $("#promo_slider").fadeOut(500, function() {
      $(this).html(diesbild).fadeIn(500);
      loopTimer = setTimeout(runIt, 5000);
    });
  }
  runIt();
});
.klick {
  margin-left: 20px;
  margin-right: 20px;
}
.klick:hover {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="linkleiste"></div>
<div id="promo_slider"><span class="blink"></span></div>

こちらもjFiddleです。

于 2013-02-04T18:59:05.793 に答える