重置幻灯片开始在每个函数clickhandler按钮第一张幻灯片 [英] reset slideshows to start at first slide with each clickhandler button
问题描述
我有一系列的幻灯片显示 - 一点点笨拙，但他们的工作
。 VAR幻灯片= {
分页：函数（）{
变种幻灯片= $（'div.slide'，'.allslideshow'），
总= slides.length;
$（'。幻灯片-NAV计）文本（总）;
slides.each（函数（一）{
$（本）的.data（索引，i + 1的）;
}）;
}，
MOVETO：函数（$ A）{
VAR滑= $（$ a.attr（HREF'））;
VAR包装= $（'幻灯片 - 包装。'）;
wrapper.animate（{
左：-slide.position（）离开
}，300，线性，函数（）{
$（'幻灯片-NAV电流。）文本（slide.data（索引））。
$ a.addClass（激活）的兄弟姐妹（'A'）removeClass移除（激活）。;
}）;
}，
导航：函数（）{
无功自我=这一点;
$（'A'，'.slideshow-NAV）。点击（函数（五）{
即preventDefault（）;
如果（self.interval）{
clearInterval（self.interval）;
self.interval = FALSE;
}
变量$ a = $（本）;
VAR滑= $（$ a.attr（HREF'））;
self.moveTo（$ A）;
}）;
}，
将autoPlay：函数（）{
变量$ ALIST = $（'A'，'.slideshow-NAV'）;
变种I = 0;
无功自我=这一点;
this.interval =的setInterval（函数（）{
变量$ a = $ alist.eq（我+ +）;
I％= $ alist.length;
self.moveTo（$ A）;
}，1000）;
}，
初始化：函数（）{
this.paginate（）;
this.navigate（）;
$（'。幻灯片-NAV电流）文本（1）;
this.autoPlay（）;
}
};
$（函数（）{
Slideshow.init（）;
}）;
}）;
现在的问题是......在幻灯片中的jQuery显示/隐藏内容的按钮页面上出现。所以，举例来说，如果你点击一个内容按钮，然后又是内容的按钮;所有的幻灯片在后台仍在运行。
问题：我需要有幻灯片RESET点击切换按钮每一次，因此用户不会看到幻灯片放映开始在幻灯片2或3，但必须开始幻灯片＃1，每次！
我的切换按钮/相关click处理codeS如下。任何建议，以有幻灯片重启从幻灯片1每次内容切换按钮进行选择？
$（文件）。就绪（函数（）{
$（＃star_btn1，＃star_btn2，＃star_btn3，＃star_btn4，＃star_btn5，＃star_btn6，＃star_btn7，＃star_btn8，＃star_btn9，＃star_btn10）。每个（函数（C）{
$（本）.delay（500 * C）.fadeIn（600）
}）
$（w_stars）。在（点击的mouseout鼠标悬停功能（C）{
变种L = $（本）.attr（数据名称）;
$（＃图）。usmap（触发，L，c.type，C）
}）
复位：函数（）{
如果（this.interval）{
clearInterval（this.interval）;
this.interval = FALSE;
}
this.moveTo（$（）儿童（）第（）在幻灯片演示，资产净值。）;
VAR幻灯片= $（'allthestates。'）的孩子。（：可见）;
$（幻灯片）.find（'。幻灯片-NAV一）第一（）addClass（激活）的兄弟姐妹（）removeClass移除（激活）。;
}，
初始化：函数（）{
this.paginate（）;
this.navigate（）;
$（'。幻灯片-NAV电流）文本（1）;
this.autoPlay（）;
}
};
//（功能（$）{
//Slideshow.init（）;
//}）（jQuery的）;
$（'。w_stars）。点击（函数（）{
Slideshow.reset（）;
Slideshow.init（）;
}）
I have a series of slide shows - a tad clunky, but they work.
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();
});
});
The problem is.. The slideshows appear within jQuery show / hide content buttons on page. So, for instance if you click one content button, and then another content button; all the slideshows are still running in the background.
PROBLEM: I need to have the slideshow RESET each time a toggle button is clicked, so the user wont see the slide show start at slide 2 or 3 but must start at slide #1 every time!!
My toggle buttons / relevant click handler codes are below. Any suggestions to have slideshow restart from slide 1 every time content toggle buttons are selected?
$(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)
})
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按钮第一张幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
