0

次のjqueryを使用して、単純なカスタムスライダーを設定しようとしています

var divs = $('div[class^="slide-holder-"]').hide(),
    i = 0,
    $slide = $("#banner > div");

(function cycle() { 
    divs.eq(i).fadeIn(400)
              .delay(2000)
              .fadeOut(400, cycle);


i = ++i % divs.length;
})();

次のhtmlで

<div id="banner">
   <div class="slide-holder-1">
      <div class="slide-1"> some content </div>
   </div>
   <div class="slide-holder-2">
      <div class="slide-2"> some content </div>
   </div>
</div>

前と次のリンクを追加して、まっすぐに戻る/進むことを検討していますが、運がありません。助けていただければ幸いです!

乾杯

4

1 に答える 1

0

あまりエレガントではありませんが、div に追加して、html で前方または後方に切り替えます。

<div id="banner">
   <div id="backward" style="float:left">&lt;</div>
   <div id="forward" style="float:right">&gt;</div>
   <div class="slide-holder-1">
      <div class="slide-1"> some content 1 </div>
   </div>
   <div class="slide-holder-2">
      <div class="slide-2"> some content 2 </div>
   </div>
   <div class="slide-holder-3">
      <div class="slide-3"> some content 3 </div>
   </div>
</div>

その後、アニメーションを停止し、i必要に応じて変更して、cycle作業を再開します。

$(function() {

  var divs = $('div[class^="slide-holder-"]').hide(),
      i = 0,
      $slide = $("#banner > div");

  function cycle() { 
      divs.eq(i).fadeIn(400)
          .delay(2000)
          .fadeOut(400, cycle);
      i = ++i % divs.length;
  }

  $('#forward').click(function() {
      divs.stop(true).hide();
      cycle();
  });

  $('#backward').click(function() {
      divs.stop(true).hide();
      i = (i-2+divs.length) % divs.length;
      cycle();
  });

  cycle();

});

cycleこれを機能させるには、「目に見える」機能を作成する必要があります。次のページに移動する前に現在の要素を表示する必要があるため、アイテムをすばやくページングすることはできませんfadeInが、少なくとも出発点である可能性があります。

于 2013-02-07T01:17:28.910 に答える