让 jQuery 循环在一页上运行多个实例的问题答案

【问题标题】：Issues getting jQuery cycle to run multiple instances on one page让 jQuery 循环在一页上运行多个实例的问题
【发布时间】：2016-03-02 18:38:45
【问题描述】：

不久前我开始了一个主题，即让 jQuery 循环插件的多个实例在一个页面上运行，每个实例都使用一组单独的控件。链接：Need multiple jQuery cycle sliders to use different prev/next buttons

我得到的响应似乎是正确的想法，但我无法让它发挥作用。我仍在学习 javascript，有时很难将东西放在正确的位置，但我尝试添加我能想到的任何地方给我的代码，但没有任何效果。这是我的原始脚本：

$('.slides').cycle({ 
        fx:      'scrollHorz', 
        speed:  'slow', 
        timeout: 0, 
        nowrap: true,
        pause:   1,
        prev: $('.slider-arrow-left'),
        next: $('.slider-arrow-right'),
        cssBefore:{ 
            top: 0,
            opacity: 1,
            display: 'block'
        }, 
        animOut: {  
            top: 360
        },
        before: function(curr, next, opts){
            var $curr = $(curr);
            var $next = $(next);
        },
        pause: 1,
        pager: '.slider-controls',
        pagerAnchorBuilder: function (idx, slide) {
            return '.slider-controls li:eq(' + idx + ') a';
        }
    });

提供的解决方案代码：

$('.slides').each(function(){
     /* look for controls only within this instance*/
        var nextBtn=$(this).parent().find('.slider-arrow-left');
            $(this).cycle({ 
            next: nextBtn
        });
        var prevBtn=$(this).parent().find('.slider-arrow-right');
            $(this).cycle({ 
            prev: prevBtn
        });
    });

这是正确的代码吗？如果是这样，有人可以给我完整的代码吗？我的基本 HTML 布局是这样的（完整的代码在页面上重复了 4 次）：

<div class="slider">
<div class="slides">
    <div class="slide">
        Images
    </div>
    <div class="slide">
        Images
    </div>

</div>
<img src="images/arrow-L.png" alt="Left" class="slider-arrow-left"/>
<img src="images/arrow-R.png" alt="Right" class="slider-arrow-right"/>
</div><!--slider-->

【问题讨论】：

你有没有机会创建一个fiddle 来展示你实际拥有的东西？
这里是小提琴。 jsfiddle.net/gbYhB/9 出于某种原因，它与实时站点的工作方式略有不同，在实时站点上，无论您单击哪组箭头，它都只控制第一个滑块。我也无法让左箭头显示在小提琴上，但您可以看到右箭头移动所有滑块。

标签： jquery cycle

【解决方案1】：

好的，我现在了解您的问题。

首先，要显示箭头，我需要将它的样式设置为left: 0;，因为这是你所能做到的。

其次，在一页中有多个“循环”插件，您需要为它们分配不同的名称，并为其箭头属性分配不同的名称，否则它们将控制相同的东西。不确定您是否需要这么多属性，但决定不修改。

这是工作小提琴：http://jsfiddle.net/gugahoi/gbYhB/12/

主要的变化是：

HTML

<h3>Website Design</h3>
<div class="slider">
    <div class="slides" id="cycleOne">  <!-- Added ID -->
...
...
    <img src=".../arrow-L.png" alt="Left" class="slider-arrow-left move-left"/> <!-- Added class 'move-left' to target with jquery-->
    <img src=".../arrow-R.png" alt="Right" class="slider-arrow-right move-right"/> <!-- Added class 'move-right' to target with jquery-->
</div><!--slider-->
<h3>Print Design</h3>
<div class="slider">
    <div class="slides" id="cycleTwo">  <!-- Added ID -->
    ...
    ...
    <img src=".../arrow-L.png" alt="Left" class="slider-arrow-left move-left2"/> <!-- Added class 'move-left2' to target with jquery-->
    <img src=".../arrow-R.png" alt="Right" class="slider-arrow-right move-right2"/>  <!-- Added class 'move-right2' to target with jquery-->
</div><!--slider-->

JavaScript

$('#cycleOne').cycle({  // id of first cycle
    ...
    prev: $('.move-left'),  // Targeting classes for the first set of arrows
    next: $('.move-right'), // to control the first cycling
    ...
});
$('#cycleTwo').cycle({  // id of second cycle
    ...
    prev: $('.move-left2'), // Targeting classes for the second set of arrows
    next: $('.move-right2'),// to control the second cycling
    ...
});

【讨论】：

【解决方案2】：

$('.slides').each(function(){
    /* look for controls only within this instance*/
    $(this).cycle({ 
        fx:      'scrollHorz', 
        speed:  'slow', 
        timeout: 0, 
        nowrap: true,
        pause:   1,
        prev: $(this).parent().find('.sl_prev'),
        next: $(this).parent().find('.sl_next'),
    });
});

【讨论】：