Question

我希望用旋转木马显示图像的数量以及当前活动的图像编号，例如3/5。我正在使用以下插件来响应转盘：

https://github.com/mrbinky3000/responsive_carousel

我已经全神贯注地知道如何做到这一点并没有运气，也不知道从哪里开始，因为我对jQuery的了解非常少。非常感谢任何帮助。

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

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

Answer 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或其他一样显示它，您需要查看当前活动的元素。在没有看到你的代码的情况下，我只能想象滑块在循环时标记哪个元素处于活动状态。你只需要抓住并使用它。

Answer 2

将图像LI容器位置与.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); 
}

显示轮播中图像的计数数量 - jQuery

2 个答案: