Question

我正在尝试制作一个包含jQuery Cycle Slideshow的多个实例的页面，每个实例都有一个图像计数器，显示当前图像索引，例如图5/7

我遇到了为每个幻灯片显示图像索引计数器的问题，以及单击图像会使所有幻灯片显示前进，而不是单个幻灯片显示。

每个图片幻灯片都会出现在Wordpress循环中，因此我不认为每个幻灯片都可以有一个唯一的ID，作为指定点击时哪个幻灯片应该前进的方法。

以下是我的幻灯片代码...

<div class="slideshow">
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach6.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach7.jpg" width="200" height="200" />
</div>
<div id="caption"></div>


<div class="slideshow">
    <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
</div>
<div id="caption"></div>

以及js / jquery ......

$(function() {
    $('.slideshow').cycle({
        fx:       'fade',
        timeout:   0,
        next: '.slideshow',
        after:     onAfter
    });
});

function onAfter(curr,next,opts) {
    var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
    $('#caption').html(caption);
}

以下是我制作的小提琴的链接，说明了问题。

http://jsfiddle.net/JUST_ROB/VhcgL/55/

认为应该有一个非常简单的解决方案，但需要一些帮助。谢谢！

Answer 1

你有两个问题。

您使用了两次 id 。（The id global attribute defines a unique identifier (ID) which must be unique in the whole document)
您没有根据滑块添加标题。

您必须使用类而不是caption的id，并且需要根据给定的滑块添加迭代器。使用jQuery-cycle，您可以通过使用（基于您的参数名称）opts.$cont然后使用类caption

解决方案将是以下代码：

$(function() {
    $('.slideshow').cycle({
        fx:       'fade',
        timeout:   0,
        next: '.slideshow',
        after:     onAfter
    });
});

function onAfter(curr,next,opts) {
    var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount; 
    
    opts.$cont.next('.caption').html(caption);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<div class="slideshow">
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach6.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach7.jpg" width="200" height="200" />
</div>
<div class="caption"></div>


<div class="slideshow">
    <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
</div>
<div class="caption"></div>

Here as JSfiddle

一个页面上有多个jQuery Cycle幻灯片，每个都有图像计数器

1 个答案: