我使用 cycle2 插件来显示由一些图像和另一个幻灯片组成的幻灯片。内部幻灯片的下一个和上一个按钮由于某种原因(在示例中向上和向下)不起作用,尽管恕我直言,它们已正确设置:
data-cycle-prev="#upDiv"
data-cycle-next="#downDiv"
和
<div id="upDiv">
<a href="#" id="upImg"><img src="images/up.png" alt="" /></a>
<p>scroll up</p>
</div>
<div id="downDiv">
<p>to see more scroll down</p>
<a href="#" id="downImg"><img src="images/down.png" alt="" class="outer-slide" /></a>
</div>
如何使它们工作?
这是一个演示: http://jsfiddle.net/FKU2L/22/
有几个问题
首先,在周期 2 中,嵌套幻灯片应如下所示:
<div class="cycle-slideshow" data-cycle-slides="> div">
<div><img src="..."/></div>
<div>
<div class="cycle-slideshow inner-slideshow">
<img src="..."/>
<img src="..."/>
</div>
</div>
<div><img src="..."/></div>
</div>
重要的是,幻灯片都应该是相同的标签,例如img img img
或div div div
而不是img div img
。因此,您需要将第一级幻灯片img
包裹在divs内部。由于它们现在不是 img
,这是默认设置,您需要在外部幻灯片上设置data-cycle-slides="> div"
。
此外,您还需要您的内部幻灯片也位于div 内部,例如 <div><div class="cycle-slideshow inner-slideshow">
而不仅仅是 <div class="cycle-slideshow inner-slideshow">
.幻灯片可以嵌套,但不能交叉剑。
您的示例中当前发生的事情是,它同时运行两个幻灯片,对两个节目使用相同的下一个和上一个按钮,并将img
从div
中撕下来。因此,您不是运行 2 个嵌套幻灯片,而是运行 2 个并发幻灯片,其中一个恰好在另一个内部,这是幻灯片直接相互接触的副产品,并且第一个节目的幻灯片没有嵌套在 div
秒中。
做了一个工作小提琴:http://jsfiddle.net/filever10/dLQPD/
您可以通过在此处查看源代码来了解更多信息:http://jquery.malsup.com/cycle2/demo/nested.php