显示旋转木马中的图像计数- jQuery

Question

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

https://github.com/mrbinky3000/responsive_carousel

我已经到处寻找如何做到这一点，但没有运气，也不知道从哪里开始，因为我对jQuery的知识非常少。任何帮助都将不胜感激。

下面是我在carousel中使用的代码示例的链接：

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

Answer 1

将图像LI容器位置与滑块目标偏移量相匹配。

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); 
}

Answer 2

下面是如何使用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左右的内容，您需要查看哪个元素当前处于活动状态。在看不到你的代码的情况下，我只能想象滑块标记了哪个元素是活动的，因为它循环通过它们。你只需要抓住它并使用它。