我正在制作一个 jQuery 滑块(如此陈词滥调),当您单击控件中的一个项目符号时,我在更改幻灯片时遇到了问题。除此之外,它功能齐全。我找到了 jQuery 计时器插件,并用我正在使用的 'setInterval()' 函数将其换掉。
所以,问题,当您单击控件中的项目符号时,我似乎无法弄清楚如何让幻灯片发生变化...我尝试将单击的项目符号值(幻灯片#)传递给计时器函数,但没有t 工作(我这样做的方式)。我不太了解方法或 jQuery 插件格式,所以这对我来说很困难。
我的服务器 上的链接(工作): http: //www.horsepowerfreaks.com/plugins/responsiveSlider/demo.html
这是jsFiddle (由于某种原因无法正常工作......):http: //jsfiddle.net/derekfoulk/yUqKJ/
文件:
滑块插件(问题所在) http://www.horsepowerfreaks.com/plugins/responsiveSlider/rSlider.jquery.js
样式表 http://www.horsepowerfreaks.com/plugins/responsiveSlider/style.css
插件文档/演示: https ://github.com/jchavannes/jquery-timer http://jchavannes.com/jquery-timer/demo
我尝试的一部分:
/* Bullets - Here is my problem. This is not working the way I need it to.
Basically, when the user clicks a bullet, the slider should make the referenced
slide active and then reset the timer */
else if (action === "bullet"){
// If user clicks on active bullet
if ($(this).hasClass("active")){
// Play/Pause (timer)
Slider.toggleGallery();
}
else {
/* Change slide (by referencing the 'data-slide' attribute of the bullet,
then find the slide using that same value for its 'data-slide' attribute
and make it the active slide and reset the timer */
imageId = $(this).attr("data-slide");
$(".active",$controls).removeClass("active");
$(this).addClass("active");
Slider.changeSlide(imageId);
}
}
...进一步向下文件...
Slider = new (function() {
var $galleryImages,
$timeRemaining,
incrementTime = options.pause,
/* I am pretty sure this function needs to be fed the slide number that was selected
when the user clicks a bullet. If it is the first run through, then the value of
'imageId' should be '-1'. I would rather have the imageId value be set to '1'
initially, but the configuration below is what worked for me... If I set the imageId
to '0', numSlides to '$galleryImages.length' and the imageId inside the if statement
to 0, then I get slide 2 for imageId 1, slide 3 for imageId 2, slide 4 for imageId 3,
and slide 1 for imageId 4? If there is a way to have the active image (imageId)
iterate '1,2,3,4' instead of '0,1,2,3' that would be awesome. */
imageId = -1, // Which image is being shown
updateTimer = function() {
$galleryImages.eq(imageId).stop(true,true).removeClass("active");
imageId++;
console.log(imageId);
var numSlides = $galleryImages.length - 1;
if (imageId >= numSlides) {
imageId = -1;
}
$galleryImages.eq(imageId).stop(true,false).addClass("active");
},
init = function() {
$galleryImages = $(".slider").find('li');
Slider.Timer = $.timer(updateTimer, incrementTime, true).once();
};
this.toggleGallery = function() {
if (this.Timer.isActive) {
this.Timer.pause();
var remaining = this.Timer.remaining / 1000;
}
else {
this.Timer.play();
}
};
$(init);
});