0

前段时间我开始了一个关于让 jQuery 循环插件的多个实例在一个页面上运行的主题，每个实例都使用一组单独的控件。链接：需要多个 jQuery 循环滑块来使用不同的上一个/下一个按钮

我得到的回应似乎是正确的想法，但我无法让它发挥作用。我仍在学习 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-->
4

2 回答 2

0

好的，我现在明白你的问题了。

首先，要让箭头显示我需要将它的样式设置为，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
    ...
});
于 2013-02-02T03:50:31.297 回答
0 

$('.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'),
    });
});

于 2016-03-02T10:38:45.837 回答