javascript - 将元素符号控件添加到选项卡式幻灯片

Question

希望有人知道如何做到这一点。我是编程新手，无法弄清楚或在其他任何地方找到答案。我想要做的是向现有的选项卡式幻灯片添加辅助控件。辅助控件将是链接的元素符号，这些元素符号会变得活跃和不活跃，就像现有链接在幻灯片播放和点击时一样。

您可以在此处查看我的示例 http://jsfiddle.net/j08691/ZSPX3/1/ . jquery 代码如下。在此先感谢您的帮助。

 var HM = {
    //tab
    jqs_slideList: '.slideList',
    jqs_tabList: '.slides .carouselLinks',


    init: function() {
        //init sliders
        var aSliders = $(this.jqs_slideList);
        if (aSliders.length > 0) {
            this.slideShow(aSliders);
        }

        //init the carousels that are lists of links
        $('.carousel.icons').hellmannsCrsl({
            rotateSpeed: 5000,
            viewport: '.carouselLinks'
        });
    },

    slideShow: function(eSlideListParam) {
        var slideList = eSlideListParam,
            slides = slideList.find('li'),
            tabList = slideList.siblings('.carouselLinks'),
            tabs = tabList.find('li'),
            speed = 500;


        tabs.on('click', 'a', function(e) {
            $(this).trigger('slides.swap');
            e.preventDefault();
        });

        //make it automatic, but this doesn't work properly, I'm stuck...
        setInterval(function() {
            var current = parseInt($('li.selected a').data('links-to').split('_')[1],10);
            var idx=current-1;
            var max = $('.carouselLinks li a').length;
            idx = (current<max) ? (idx+1):0;
            $('a:eq('+idx+')').trigger('click');
        }, 3000);

        /**
         * This is where the animation, i.e. fade, is performing.
         * I find it quite convenient to use bind/trigger principle as it's easier to maintain
         */
        tabs.find('a').bind('slides.swap', function() {
            var self = $(this),
                selfIndex = self.parent().index(),
                targetSlide = slides.eq(selfIndex);

            //fade in/out slides
            slides.filter('.active').stop(true, false).fadeOut(speed, function() {
                $(this).removeClass('active');
            });
            targetSlide.stop(true, false).fadeIn(speed).addClass('active');

            tabs.removeClass('selected');
            self.parent().addClass('selected');
        });
    }
};

HM.init();

Answer 1

这是一个 Fiddle

HTML

<!-- bullet ctrl -->
<div class="bulletLinks">
    <ul>
        <li><a data-links-to="slide_1" href="#">1</a></li>
        <li class="selected"><a data-links-to="slide_2" href="#">2</a></li>
        <li><a data-links-to="slide_3" href="#">3</a></li>
        <li><a data-links-to="slide_4" href="#">4</a></li>
    </ul>
</div>
<!-- /bullet ctrl -->

CSS

.bulletLinks a {
  background: #900; // Or bullet background image
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 50%;
  transition: all 0.2s linear;
}
.bulletLinks a:hover {
  background: #999;
  color: #fff;
}

jQuery 代码编辑

tabList = slideList.siblings('.carouselLinks, .bulletLinks'),