0

在我的图像轮播中，主要变化的是margin-left. 由于知道了这个值，我想尝试解释一个幻灯片编号（如“图像 3 of 4”）。我得到了所有幻灯片的数量：

var all_slides_width = $('#gallery_wrapper').outerWidth();
var slide_width = $('.image_content').outerWidth();
var slide_quantity = all_slides_width / slide_width;

然后我想通过以下方式获取当前可见图像的数量：

var margin_left = parseInt($('#gallery_wrapper').css('margin-left'));
var slide_count = parseInt(-margin_left + slide_width) / slide_width;

并显示它：

<span class="slide_number"></span>
<script>
    $( '.slide_number' ).text( 'Image ' + slide_count + " of " + slide_quantity);
</script>

问题是，margin-left每张新幻灯片都会发生变化。所以我需要一个slide_count每次更改时都会更改的循环margin-left。我怎样才能做到这一点？每一秒的AsetTimeout显然是非常低效的。这是我当前状态的一个小提琴：http: //jsfiddle.net/cqgnvsce/

4

1 回答 1

1

我刚刚从 slide_number() 中删除了您的超时和自调用。那是你想要做的吗？http://jsfiddle.net/76zfn6ga/每当您调用 slide() 时，您已经在调用 slide_count，所以我认为不需要循环。事实上，为什么不从 slide() 中调用 slide_number() 呢？

var slide_number = function () {
    var margin_left = parseInt($('#gallery_wrapper').css('margin-left'));
    var slide_count = parseInt(-margin_left + slide_width) / slide_width;
    $('.slide_number').text('Image ' + slide_count + " of " + slide_quantity);
};
于 2014-10-14T17:29:37.517 回答