将简单分页添加到现有幻灯片中

时间:2012-12-09 11:33:13

标签: javascript jquery slideshow

我想为这个现有脚本添加简单的分页: http://sixrevisions.com/demo/slideshow/final.html

所以基本上它会计算<div class="slide">实例的数量,然后生成一个列表(例如1 - 2 - 3 - 4),每个实例都有一个指向该特定幻灯片的超链接。

我对Javascript不是很热,所以会喜欢这方面的帮助。

有人可以告诉我如何实现这个目标吗?

非常感谢任何指示: - )

1 个答案:

答案 0 :(得分:1)

基本上,您希望使用变量numberOfSlides为每张幻灯片添加一个链接元素,然后将闭包添加到这些链接上的绑定。您可以通过将计数器变量分配给创建的每个链接来重用动画计算。

for(i = 0; i < numberOfSlides; i++) {
    (function() {
        var slideIndex = i;
        var slideLabel = i + 1;
        var x = $('<a id="slide' + slideLabel + '"href="javascript:void(0);" class="paginatorLink">' + slideLabel + '</a>'); //Format your links here
        x.click(function() {
            currentPosition = slideIndex;
            // Hide / show controls
            manageControls(currentPosition);
            $('#slideInner').animate({
                'marginLeft': slideWidth * -slideIndex
            });
        });
        $('#slideshow').append(x);
    })();
}

这是一个小提琴:http://jsfiddle.net/radiatorsounds/aQb6P/