0

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

这是标记：

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

这就是我所说的滑块：

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

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

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

4

2 回答 2

2 
$(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/

于 2012-10-16T09:10:38.873 回答
0

请参阅此插件的 onPrevNextEvent 回调函数。

$("ul#slides").cycle({
      fx: 'fade',
      pause: 1,
      prev: '#prev',
      next: '#next',
      onPrevNextEvent : function(isNext, zeroBasedSlideIndex, slideElement){
           $('.project_number p').text(zeroBasedSlideIndex+'/'+$("ul#slides img").length);
      }
  });

不测试此代码，但可能在循环完成之前触发 onPrevNextEvent。在这种情况下，您应该查看 isNext 参数或 onAfter 事件。

于 2012-10-16T09:08:47.773 回答