向现有幻灯片放映添加简单分页

Adding simple Pagination to an existing Slideshow(向现有幻灯片放映添加简单分页)

问题描述

我想向此现有脚本添加简单的分页： http://sixrevisions.com/demo/slideshow/final.html

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

我对Java脚本不是很感兴趣，所以我希望在这方面有一些帮助。

有人能告诉我如何做到这一点吗？

非常感谢您的指点：-)

推荐答案

基本上，您希望使用变量number OfSlides为每个幻灯片添加一个链接元素，然后将闭包添加到这些链接上的绑定。您可以在创建链接时将COUNTER变量分配给每个链接，从而重复使用动画计算。

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/

这篇关于向现有幻灯片放映添加简单分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！