Question

我在最近的构建中使用Cycle2进行简单的幻灯片演示，但我在一个页面上有多个幻灯片。我已经阅读了文档，并认为我已经得到它，但唉，上一个/下一个导航和寻呼机不太起作用。寻呼机引入了太多的“点”而prev / next不起作用。

JS以及下面的“滑块”HTML之一...

$('.slider').each(function() {
    var $this = $(this);
    $this.before('<div class="slider-pager">');
    $this.cycle({
        fx: 'scrollHorz',
        sync: true,
        speed:  'fast', 
        timeout: 0, 
        next:   $this.next('.slider-navigation .next'), 
        prev:   $this.next('.slider-navigation .prev'),
        pager:  $this.prev('.slider-pager')
    });
    $this.parent().hover(
        function() {
            $this.next('.slider-navigation').stop(true,true).fadeIn();
            $this.prev('.slider-pager').stop(true,true).fadeIn();
        }, function() {
            $this.next('.slider-navigation').stop(true,true).hide();
            $this.prev('.slider-pager').stop(true,true).hide();
        }
    );
});

<div class="slider-container">
    <div class="slider">
        <img src="/media/thumbnails/uploads/shop/prints/reynolds-after-raphael_page_image.jpg" />
        <img src="/media/thumbnails/uploads/shop/prints/reynolds-after-raphael_page_image.jpg" />
        <img src="/media/thumbnails/uploads/shop/prints/reynolds-after-raphael_page_image.jpg" />
        <img src="/media/thumbnails/uploads/shop/prints/reynolds-after-raphael_page_image.jpg" />
    </div>
    <div class="slider-navigation">
       <a class="prev" href="#">I</a>
       <a class="next" href="#">J</a>
    </div>
</div>

干杯， [R

Answer 1

以下代码对我有用，我从http://jquery.malsup.com/cycle/multi-prevnext.html那里得到了

$(document).ready(function() {
  $('.pics').each(function() {
    var cycle = $(this),
      controls = cycle.parent().find('.controls'),
      fx = cycle.data('fx'),
      speed = cycle.data('speed') || 200;

    cycle.cycle({
      timeout: 0,
      speed: speed,
      fx: fx,
      next: controls.find('.next'),
      prev: controls.find('.prev'),
      caption: cycle.parent().find('div.caption'),
      before: function(curr, next, opts) {
        opts.caption.html($(next).attr('title'));
      }
    });
  });
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

<div class="cycle-slideshow">
  <div class="controls">
    <button class="prev">Previous</button>
    <button class="next">Next</button>
  </div>
  <div class="pics">
    <img src="http://malsup.github.com/images/beach1.jpg">
    <img src="http://malsup.github.com/images/beach2.jpg">
    <img src="http://malsup.github.com/images/beach3.jpg">
  </div>
  <div class="caption">Beach 1</div>
</div>

<div class="cycle-slideshow">
  <div class="controls">
    <button class="prev">Previous</button>
    <button class="next">Next</button>
  </div>
  <div class="pics">
    <img src="http://malsup.github.com/images/beach1.jpg">
    <img src="http://malsup.github.com/images/beach2.jpg">
    <img src="http://malsup.github.com/images/beach3.jpg">
  </div>
  <div class="caption">Beach 2</div>
</div>

Cycle2多个幻灯片

1 个答案: