1

我需要使用导航的第一个滑块和第二个自动但单击导航按钮运行两个滑块。代码在这里:

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

1 回答 1

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>

然后,在您为幻灯片操作自定义类下的任何内容之前,您的 JQuery 代码必须具有这些简单的行:

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

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

之后,您可以像通常使用循环幻灯片一样进行所有操作...希望对您有所帮助!

前任:

$('.slide1').cycle('goto', 4);
于 2013-11-18T16:32:29.283 回答