javascript - slider 中的图像数 (1/10)

Question

这是一张具有自动淡入功能的图像幻灯片，我还可以通过左下角的箭头(下一个和上一个箭头)来控制它。问题是我想显示图像总数和我们正在观看的图像的当前数量(如箭头之间的编号)，我已经做了标记，但我搜索了很多关于如何对数字进行编程但不能找不到任何类似的东西。有人可以帮帮我吗？

这是标记:

<div id="slideshow">
    <ul id="slides">
        <li><img src="img/project_image.jpg" /></li>
        <li><img src="img/project_image2.jpg"/></li>
        <li><img src="img/project_image3.jpg" /></li>
        <li><img src="img/project_image4.jpg" /></li>
    </ul>
</div>

<div class="project_navigation" class="clearfix">
    <ul id="nav">
        <li id="prev"><a href="#">Previous</a></li>
        <div class="project_number">
            <p>10/12</p>
        </div>
        <li id="next"><a href="#">Next</a></li>
    </ul>
</div>

我是这样称呼 slider 的:

  $("#slideshow").css("overflow", "hidden");

  $("ul#slides").cycle({
      fx: 'fade',
      pause: 1,
      prev: '#prev',
      next: '#next'
  });

我正在使用这个插件: http://jquery.malsup.com/cycle/

Answer 1

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

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

您可以使用 after 回调(或 before)通过函数更改 div 的内容。此函数将在每次转换之后(或之前)运行。

http://jsfiddle.net/spacebeers/VhcgL/