0

这里希望有人知道如何做到这一点。我是编程新手,无法弄清楚或在其他任何地方找到答案。我想要做的是将辅助控件添加到现有的选项卡式幻灯片。辅助控件将链接成为活动和非活动的项目符号,就像现有链接在幻灯片播放和单击时所做的那样。

你可以看到我在这里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();
4

1 回答 1

0

这是一个小提琴

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'),
于 2013-09-10T22:51:03.373 回答