多个jQuery Cycle分页导航

Question

多个jQuery Cycle分页导航

jqueryjquery-pluginsjquery-selectorsjquery-cycle

3

我正在实现jQuery循环插件，创建20个图库，每个图库都有自己的上一个、下一个和分页器导航控件，并且无需为每个幻灯片显示创建和引用3个新的id名称，避免创建单独的函数用于每个幻灯片。在下面的示例中，我尝试为每个幻灯片提供一个唯一的分页器，但是效果有限。我希望有一种更直观的方法来使用.each()函数编写此代码。感谢任何能够提供帮助的人。

HTML：（在这个示例中，我只包括了两个幻灯片）

<div class="slideshow_container">
    <div class="work_slideshow">
        <div class="slideshow" id="s1">
            <img class="slide" src="images/port/design_unique_1.jpg" />
            <img class="slide" src="images/port/design_unique_2.jpg" />
            <img class="slide" src="images/port/design_unique_3.jpg" />
        </div>
        <div class="controls">
            <img src="images/arrow_left.png" class="prev"/>
            <img src="images/arrow_right.png" class="next"/>
        </div>
        <div class="pager" id="pager1"></div>
    </div>

    <div class="work_slideshow">
        <div class="slideshow" id="s2">
            <img class="slide" src="images/port/design_equality_1.jpg" />
            <img class="slide" src="images/port/design_equality_2.jpg" />
        </div>
        <div class="controls">
            <img src="images/arrow_left.png" class="prev"/>
            <img src="images/arrow_right.png" class="next"/>
        </div>
        <div class="pager" id="pager2"></div>
    </div>
</div>

jQuery:

$('.slideshow').cycle({   
    fx: 'fade',
    easing: 'easeOutExpo',
    speed:2000,
    prev:'.prev',
    next:'.next',
    timeout:0,
    pagerAnchorBuilder: function(idx, el) {
        return '<a href="#" title="Slides"></a>';
    },
});
$('#s1').cycle({
pager:'#pager1'
});
$('#s2').cycle({
pager:'#pager2'
});

- negrelja

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dogoku · Answer 1

编辑：没有仔细阅读问题。这是您要的答案。

$('.slideshow').each(function () {
var pager = $(this).closest('.work_slideshow').find('.pager');
$(this).cycle({
    fx: 'fade',
    easing: 'easeOutExpo',
    speed:2000,
    timeout:0,
    pager: pager,
    pagerAnchorBuilder: function(idx, el) {
        return '<a href="#" title="Slides"></a>';
    },
});
});

像这样吗？

对于“prev”和“next”，我认为手动绑定它们会更有效率，方法如下。

$('.slideshow_container').on('click','.controls .prev',function (e) {
    e.preventDefault();
    $(this).closest('.work_slideshow').find('.slideshow').cycle('prev');
});

$('.slideshow_container').on('click','.controls .next',function (e) {
    e.preventDefault();
    $(this).closest('.work_slideshow').find('.slideshow').cycle('next');
});

基本上为所有的下一个/上一个按钮设置单个点击处理程序，并手动使用.cycle('prev')和.cycle('next')访问循环插件

如果您想要，甚至可以将其缩小为仅一个点击处理程序

$('.slideshow_container').on('click','.controls a',function (e) {
  e.preventDefault();
  if ($(this).hasClass('next') {
    $(this).closest('.slideshow').cycle('next');
  } else {
    $(this).closest('.slideshow').cycle('prev');
  }
});