我已经在我的博客上发布了一个示例jQuery幻灯片放映：
robertmarkbramprogrammer.blogspot.com/2010/09/jquery-slideshow.html
在Chrome中，每张图片都闪烁。在IE和Firefox中，它看起来不错，而在独立版本中，它似乎也没问题（即使在Chrome上）：
http://robertmarkbram.appspot.com/content/javascript/jQuery/example_slideshow.html
这是有问题的jQuery：
<script type="text/javascript">
// ------
// ###### Edit these.
// Assumes you have images in path named 1.jpg, 2.jpg etc.
var imagePath = "images"; // Relative to this HTML file.
var lastImage = 5; // How many images do you have?
var fadeTime = 4000; // Time between image fadeouts.
// ------
// ###### Don't edit beyond this point.
var index = 1;
function slideShow() {
$('#slideShowFront').show();
$('#slideShowBack').show();
$('#slideShowFront').fadeOut("slow")
.attr("src", $("#slideShowBack").attr("src"));
index = (index == lastImage) ? 1 : index + 1;
$("#slideShowBack").attr("src", imagePath + "/" + index + ".jpg")
setTimeout('slideShow()', fadeTime);
}
$(document).ready(function() {
slideShow();
});
</script>
任何帮助将不胜感激！
抢
:)
最佳答案
有两种可能的闪烁原因。
第一个是从$('#slideShowBack').show();行开始的。
只需删除该行，因为它不会执行任何操作，因为#slideShowBack的可见性不会改变。
第二种是当您.show()将正面图像放在背面图像上时。即使正面图像现在与背面图像相同，也可能会导致瞬间闪烁。
我对这个问题的处理略有不同。
仅从一个图像开始HTML页面（这在语义上更有意义，因为第二个图像不可见...。您也可以从DOM中的所有图像开始，但这是另一种方法）。
第一次使用图像＃2调用幻灯播放功能。
幻灯片-将新图像添加到当前图像后面的DOM中
幻灯片-淡入当前图像以显示其后的新图像。
幻灯片-从DOM中删除刚褪色的图像。
幻灯片-暂停后，调用带有下一张图片的幻灯片
我还将所有变量和函数封装在一个自调用匿名函数中，以免使全局命名空间混乱：(function() { /* Everything in here */ })();。
代码中最重要的更改是，我不会突然在另一个图像的顶部上.show()一个图像，因此没有可能的闪烁源。我还利用.fadeOut()中的回调函数。这只是在淡入淡出之后调用的函数：
HTML：
<div id="slideShow">
<img src="images/1.jpg" />
</div>
Javascript：
// Contain all your functionality in a self calling anonymous
// function, so that you don't clutter the global namespase.
(function() {
// ------
// ###### Edit these.
// Assumes you have images in path named 1.jpg, 2.jpg etc.
var imagePath = "images";
var lastImage = 5; // How many images do you have?
var fadeTime = 4000; // Time between image fadeouts.
// ------
// ###### Don't edit beyond this point.
// No need for outer index var
function slideShow(index) {
var url = imagePath + "/" + index + ".jpg";
// Add new image behind current image
$("#slideShow").prepend($("<img/>").attr("src",url));
// Fade the current image, then in the call back
// remove the image and call the next image
$("#slideShow img:last").fadeOut("slow", function() {
$(this).remove();
setTimeout(function() {
slideShow((index % lastImage) + 1)
}, fadeTime);
});
}
$(document).ready(function() {
// Img 1 is already showing, so we call 2
setTimeout(function() { slideShow(2) }, fadeTime);
});
})();
jsFiddle
调用下一个幻灯片功能：
您可以使用模运算符
index = (index == lastImage) ? 1 : index + 1;而不是%从除法中获取余数，而不必使用循环变量，而必须在slideShow()函数外部进行设置，只需将要显示的照片传递为一个参数...然后，您可以使用slideShow(current+1)在setTimeout中调用下一个showImage。实际上是slideShow((index % lastImage) + 1)。最好使用匿名函数或带有setTimeout的引用而不是eval。