Question

我需要使用导航和第二个滑块自动工作，但是单击导航按钮会运行两个滑块。代码在这里：

<script type="text/javascript">
jQuery(function(){
  jQuery('.scrollsingle').cycle('prev');
  jQuery('.scrollsingle ').cycle('next');
});
</script>

<button data-cycle-cmd="prev">Prev</button>
<button data-cycle-cmd="next">Next</button>

<div class="images scrollsingle cycle-slideshow" 
    data-cycle-fx="scrollHorz" 
    data-cycle-timeout="4000"
    data-cycle-slides="> div">

   <div>content</div>
   <div>content</div>
   <div>content</div>
   <div>content</div>
</div>

<article class="span3 box boxstaff cycle-slideshow" 
    data-cycle-fx="scrollHorz" 
    data-cycle-timeout="2000"
    data-cycle-slides="> div"
    >

   <div>content</div>
   <div>content</div>
   <div>content</div>
   <div>content</div>
</article>

Answer 1

当您声明一个名为'cycle-slideshow'的类时，您将自动初始化您的幻灯片，这将以相同的方式处理具有该类的所有容器，就像任何其他类一样。您需要做的是通过声明一个不同的类来手动初始化幻灯片：

<div class="slide1">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <img src="image4.jpg">
</div>

<div class="slide2">
    <img src="image5.jpg">
    <img src="image6.jpg">
    <img src="image7.jpg">
    <img src="image8.jpg">
</div>

然后，在操作slideow的自定义类下的任何内容之前，您的JQuery代码必须具有这些简单的行：

//Initialize slide1
$('.slide1').cycle();

//Initialize slide2
$('.slide2').cycle();

之后，您可以按照通常的循环幻灯片方式执行所有操作... 希望对你有帮助！

例如：

$('.slide1').cycle('goto', 4);

jQuery Cycle2多个幻灯片导航

1 个答案: