スライスされた画像を使用して jQuery スライダーを作成し、長いスライド バナーのように見せています。
例: http://jsfiddle.net/pG8kt/66/
私が抱えている2つの問題:
1) シーケンスの 3 番目の画像の読み込みが遅すぎる
2)スライド間で停止しますが、私もそれを望んでいません
理由はありますか?ありがとう :)
スライスされた画像を使用して jQuery スライダーを作成し、長いスライド バナーのように見せています。
例: http://jsfiddle.net/pG8kt/66/
私が抱えている2つの問題:
1) シーケンスの 3 番目の画像の読み込みが遅すぎる
2)スライド間で停止しますが、私もそれを望んでいません
理由はありますか?ありがとう :)
var showing = 0, // current img
imgs = [], // all imgs
$img = $("#gallery img"), // jQuery DOM object
imgWidth = $img.outerWidth(), // img width assuming every img has same
$slider = $("#slider"),
$title = $("#title");
imgs = $img.toArray();
// Variable to store number of images
var numberOf = imgs.length;
// set slider width so floated elements line up
$slider.width(numberOf*imgWidth);
// Recursive next image function
var nextImage = function() {
var $nextImg = $(imgs[showing++ % numberOf]);
// Add next image (only use increment once!)
$slider.append($nextImg);
// Show image title
$title
.html($nextImg.attr("title"))
.attr("href", $nextImg.attr("src"));
// Animate the slider
$slider.animate({
left: '-='+imgWidth
}, 8000, 'linear', function() {
// Reset CSS
$slider.css("left", 0);
// Call animationg function again
nextImage();
});
}
// Call next image for the first time
nextImage();
あらゆるもので更新されました...