Question

前段时间我开始讨论如何在一个页面上运行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-->

Answer 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
    ...
});

Answer 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'),
    });
});

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

2 个答案: