jquery - 循环遍历元素时的上一个和下一个链接

Question

我正在尝试使用以下 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>

我希望添加上一个和下一个链接以直接返回/前进但没有任何运气，我将不胜感激任何帮助！

干杯

Answer 1

它不是很优雅，但添加到 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需要显示当前元素才能翻页到下一个，但也许它至少是一个起点。