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

Question

我正在尝试创建一个页面，其中包含 jQuery 循环幻灯片的多个实例，每个实例都有一个图像计数器，显示哪个是当前图像索引，例如7 张图片中的第 5 张

我运行遇到了为每个幻灯片制作图像索引计数器显示以及单击图像推进所有幻灯片而不是单个幻灯片的问题。

每个图片幻灯片都将在 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);
}

这是我制作的 link 到 fiddle 的说明问题。

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

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

Answer 1

您有 2 个问题。

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

您必须使用 class 而不是 caption 的 id，并且您需要根据给定的滑块添加迭代器。使用 jQuery-cycle 您可以通过使用（基于您的参数名称） opts.$cont 然后使用 class 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 个循环幻灯片，每个都有图像计数器

Multiple jQuery Cycle Slideshows on one page, each with image counter

javascript

jquery

cycle

jquery-cycle