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

【问题标题】：reset slideshows to start at first slide with each clickhandler button使用每个 clickhandler 按钮重置幻灯片以从第一张幻灯片开始
【发布时间】：2015-03-26 15:16:05
【问题描述】：

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

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)
    })

【问题讨论】：

标签： javascript jquery ajax css

【解决方案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();
})

【讨论】：