我正在使用切片图像制作一个 jQuery 滑块,看起来像一个 looong 滑动横幅:
示例:http: //jsfiddle.net/pG8kt/66/
我遇到的两个问题:
1) 序列中的第三张图片加载太晚
2)它在幻灯片之间停止 - 但我也不想要它
任何想法为什么?谢谢 :)
我正在使用切片图像制作一个 jQuery 滑块,看起来像一个 looong 滑动横幅:
示例:http: //jsfiddle.net/pG8kt/66/
我遇到的两个问题:
1) 序列中的第三张图片加载太晚
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();
更新了所有东西......