让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-->

来源

2013-02-01 Molly Campbell

任何机会，你可以创建一个[小提琴]（http://jsfiddle.net/），以显示你真正有？ –

这是小提琴。 http://jsfiddle.net/gbYhB/9/ 由于某些原因，它与现场网站的工作方式有所不同，无论您点击哪一组箭头，它只会控制第一个滑块。我也无法让左箭头出现在小提琴上，但是您可以看到右箭头移动了所有的滑块。 –

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

首先，让箭头显示我需要将它的样式设置为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-02 03:50:31

$('.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-02 10:38:45

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

回答

相关问题