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

它不是很优雅，但是在html中添加div来向前或向后切换：

<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需要在人们可以翻页到下一个之前显示当前元素，但也许它至少是一个起点。

循环浏览元素时的上一个和下一个链接

1 个答案: