jquery - 弹性图像幻灯片

Question

我一直在使用这个幻灯片

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

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

我想要的只是底部的导航显示当前索引，因此 .ei-slider-thumbs div 的子 li 如果它们是选定的幻灯片，则具有类似“当前”的类。

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

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

- - 编辑 - -

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