私は jQuery スライダーを作成しています (決まり文句です)。コントロールの箇条書きの 1 つをクリックすると、スライドが変更されるという問題があります。それ以外は、完全に機能しています。jQuery タイマー プラグインを見つけて、使用していた「setInterval()」関数と交換しました。
それで、問題、コントロールの箇条書きをクリックしたときにスライドを変更する方法がわかりません...クリックされた箇条書きの値（スライド番号）をタイマー関数に渡そうとしましたが、それはうまくいきませんでした。うまくいきました（私がやった方法）。メソッドや jQuery プラグインの形式についてはよく知らないので、これは難しいことがわかりました。
そして私のサーバー上のリンク （動作中）：http://www.horsepowerfreaks.com/plugins/responsiveSlider/demo.html
これがjsFiddleです （何らかの理由で機能していません...）：http://jsfiddle.net/derekfoulk/yUqKJ/
ファイル:
Slider プラグイン(問題がある場所) 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);
});