1

我希望显示轮播中的图像数量以及当前处于活动状态的图像数量，例如 3/5。我正在为响应式轮播使用以下插件：

https://github.com/mrbinky3000/responsive_carousel

我已经到处寻找如何做到这一点并且没有运气并且不知道从哪里开始，因为我对 jQuery 的了解很少。任何帮助将不胜感激。

这是我用于轮播的代码示例的链接：

http://matthewtoledo.com/creations/responsive-carousel/example/example-1.html

4

2 回答 2

1

以下是使用 jQuery 计算元素数量的方法：http: //jsfiddle.net/qMeKT/

jQuery：

var n = $("div img").length;
jQuery("#count").html(n);

的HTML：

<div class="container">
 <img src="http://jsfiddle.net/img/logo.png" alt="" />
 <img src="http://jsfiddle.net/img/logo.png" alt="" />
 <img src="http://jsfiddle.net/img/logo.png" alt="" />
 <img src="http://jsfiddle.net/img/logo.png" alt="" />
</div>

为了以 3/5 或类似的方式显示它，您需要查看哪个元素当前处于活动状态。在没有看到您的代码的情况下，我只能想象滑块在循环遍历它们时标记了哪个元素处于活动状态。你只需要抓住它并使用它。

于 2012-11-06T17:08:49.117 回答
1

Match the Images LI Container Position to the .slider-target Offset.

HTML

<div class="slider-mask">
     <ul class="slider-target">
          <li>
             <img src="img/01.jpg">
          </li>
          <li>
             <img src="img/02.jpg">
          </li>
          <li>
             <img src="img/03.jpg">
          </li>     
          <li>
             <img src="img/04.jpg">
          </li>                                     
       </ul>
       div class="clearfix"></div>
</div>

<div id="count"></div>

JQuery

function matchimage() {
    var targetposition =  Math.abs($('.slider-target').position().left);
    var matchthis = targetposition;
    var visible = $('.slider-target li').filter(function () { return $(this).position().left == matchthis }).index();
    var total = $('.slider img').length;
    $("#count").html((visible + 1) + ' of ' + total); 
}
于 2012-11-06T17:28:27.947 回答