弹性图像幻灯片

Question

我一直在使用这个幻灯片

http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/

这里的演示...... http://tympanus.net/Tutorials/ElasticSlideshow/

我想要的只是底部的导航显示当前索引，所以.ei-slider-thumbs div的子li如果是选定的幻灯片，则会有类似'current'的类。

不想粘贴一大堆代码，所以只提供了链接，希望在firebug中查看演示？

任何帮助将不胜感激！非常感谢

---- ---- EDIT

$('.ei-slider-element').addClass("active1");
    $('ul.ei-slider-thumbs li').click(function (e) {
        var currentEle = $(this).index();
        // alert(currentEle);
        e.preventDefault();         
        $('[class*="active"]').removeClass(function (i, c) {
            return c.match(/active\d+/g).join(" ");
        });
        $('.ei-slider-element').addClass("active" + currentEle);
    });

Answer 1

我发现活动元素是“ei-slider-element”，它正朝着被点击的元素移动。您可以编写自己的函数来定位当前元素的索引。

$('ul.ei-slider-thumbs li').click(function(){
    var currentEle = $(this).index();
    alert(currentEle);
});