Adding simple Pagination to an existing Slideshow

旧城冷巷雨未停 提交于 2021-01-28 20:39:42

问题


I'd like to add simple pagination to this existing script: http://sixrevisions.com/demo/slideshow/final.html

So basically it would count the number of <div class="slide"> instances and then generate a list (e.g. 1 - 2 - 3 - 4) and each has a hyperlink to that specific slide.

I'm not so hot with Javascript so would love some help with this.

Can someone show me how to achieve this?

Many thanks for any pointers :-)


回答1:


Basically, you want to add a link element for each slide using the variable numberOfSlides, then add closure to the bindings on those links. You can reuse the animation calculation by assigning the counter variable to each link as it's created.

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

Here's a fiddle: http://jsfiddle.net/radiatorsounds/aQb6P/



来源:https://stackoverflow.com/questions/13787001/adding-simple-pagination-to-an-existing-slideshow

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!