重置幻灯片开始在每个函数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屋!