Question

我有一系列的幻灯片 - 有点笨重，但它们有效。

var Slideshow = {
    paginate: function () {
        var slides = $('div.slide', '.allslideshow'),
            total = slides.length;
        $('.slideshow-nav-total').text(total);
        slides.each(function (i) {
            $(this).data('index', i + 1);
        });
    },
    moveTo: function($a) {
      var slide = $($a.attr('href'));
      var wrapper = $('.slideshow-wrapper');
      wrapper.animate({
        left: -slide.position().left
      }, 300, 'linear', function () {
        $('.slideshow-nav-current').text(slide.data('index'));
        $a.addClass('active').siblings('a').removeClass('active');
      });
    },
    navigate: function () {
        var self = this;
        $('a', '.slideshow-nav').click(function (e) {
            e.preventDefault();
            if (self.interval) {
              clearInterval(self.interval);
              self.interval = false;
            }
            var $a = $(this);
            var slide = $($a.attr('href'));
            self.moveTo($a);
        });
    },
    autoPlay: function() {
      var $alist = $('a', '.slideshow-nav');
      var i = 0;
      var self = this;
      this.interval = setInterval(function() {
        var $a = $alist.eq(i++);
        i %= $alist.length;
        self.moveTo($a);
      }, 1000);
    },
    init: function () {
        this.paginate();
        this.navigate();
        $('.slideshow-nav-current').text(1);
        this.autoPlay();
    }
};
$(function () {
    Slideshow.init();
    });
});

问题是..幻灯片显示在页面上的jQuery显示/隐藏内容按钮中。因此，例如，如果您单击一个内容按钮，然后单击另一个内容按钮;所有幻灯片仍在后台运行。

问题：每次点击切换按钮时我都需要重置幻灯片，因此用户不会看到幻灯片放映从幻灯片2或3开始，但每次都必须从幻灯片＃1开始!!

我的切换按钮/相关点击处理程序代码如下所示。是否有任何建议在每次选择内容切换按钮时从幻灯片1重新开始幻灯片放映？

$(document).ready(function() {
    $("#star_btn1, #star_btn2, #star_btn3, #star_btn4, #star_btn5, #star_btn6, #star_btn7, #star_btn8, #star_btn9, #star_btn10,").each(function(c) {
        $(this).delay(500 * c).fadeIn(600)
    })

    $(".w_stars").on("click mouseout mouseover", function(c) { 
        var l = $(this).attr("data-name");
        $("#map").usmap("trigger", l, c.type, c)
    })

Answer 1

            reset:function(){
                if (this.interval) {
                    clearInterval(this.interval);
                    this.interval = false;
                }
                this.moveTo($('.slideshow-nav').children().first());
                var slides=$('.allthestates').children(':visible');
                $(slides).find('.slideshow-nav a').first().addClass('active').siblings().removeClass('active');
            },
            init: function() {
                this.paginate();
                this.navigate();
                $('.slideshow-nav-current').text(1);
                this.autoPlay();
            }
        };
        //(function($) {
            //Slideshow.init();
        //})(jQuery);

$('.w_stars').click(function(){
    Slideshow.reset();
    Slideshow.init();
})

使用每个clickhandler按钮重置幻灯片以从第一张幻灯片开始

1 个答案: