我正在创建一个jQuery滑块(如此陈词滥调),当你点击控件中的一个项目符号时,我遇到了一个问题。除此之外,它功能齐全。我找到了jQuery计时器插件并用我正在使用的'setInterval()'函数交换出来。
所以,问题,当我点击控件中的子弹时,我似乎无法弄清楚如何让幻灯片更改......我尝试将点击的子弹值(幻灯片#)传递给计时器功能,那不起作用(我做的方式)。我对方法或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);
});