Javascript 为什么幻灯片会闪烁？

我在我的博客上发布了一个jQuery幻灯片示例： robertmarkbramprogrammer.blogspot.com/2010/09/jquery-slideshow.html

在Chrome中，它在每张图片上闪烁。在IE和Firefox中，它看起来不错，而在独立版本中，它看起来也不错（即使在Chrome上）：

这就是问题中的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>

   // ------
编辑这些。
//假设在名为1.jpg、2.jpg等的路径中有图像。
var imagePath=“图像”；//相对于此HTML文件。
var lastImage=5；//你有多少张照片？
var fadeTime=4000；//图像淡出之间的时间。
 
   // ------
//#######请勿编辑超过此点的内容。
var指数=1；
函数幻灯片（）{
$（'#slideShowFront'）.show（）；
$（“#幻灯片放映”）.show（）；
$（'slideShowFront'）。淡出（“慢”）
.attr（“src”），$（“幻灯片放映”）.attr（“src”）；
索引=（索引==lastImage）？1：索引+1；
$（“#幻灯片放映”）.attr（“src”，imagePath+“/”+index+“.jpg”）
setTimeout（'slideShow（）'，fadeTime）；
   }
 
$（文档）.ready（函数（）{
幻灯片（）；
   });

任何帮助都将不胜感激

抢劫

---

：）

闪烁有两种可能的原因

第一个来自行

$（“#slideShowBack”）.show（）

只需删除该行，因为它不起任何作用，因为
#slideShowBack
的可见性从未改变

第二种情况是，将正面图像置于背面图像之上。即使正面图像现在与背面图像相同，也可能会导致瞬间闪烁

我会以稍微不同的方式处理这个问题

仅用一个图像启动HTML页面（这在语义上更有意义，因为第二个图像不可见……您也可以从DOM中的所有图像开始，但这是另一种方法）
首次使用图像#2调用幻灯片放映功能
幻灯片-将新图像添加到当前图像后面的DOM中
幻灯片-淡入当前图像，显示其背后的新图像
幻灯片-从DOM中删除刚刚褪色的图像
幻灯片放映-暂停后，使用下一幅图像调用幻灯片放映
我还将把所有变量和函数封装在一个自调用匿名函数中，这样就不会使全局名称空间变得混乱：
（function（）{/*这里的所有内容*/}）（）

代码中最重要的变化是，我不会突然
.show（）
将一个图像置于另一个图像之上，因此没有可能的闪烁源。我还使用了中的回调功能。这只是淡入淡出后调用的函数：

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);
    });
})();  

//将您的所有功能包含在一个自调用匿名
//函数，这样就不会使全局名称空间混乱。
（功能（）{
// ------
//编辑这些。
//假设在名为1.jpg、2.jpg等的路径中有图像。
var imagePath=“图像”；
var lastImage=5；//您有多少个图像？
var fadeTime=4000；//图像淡出之间的时间。
// ------
//请勿编辑超过此点的内容。
//不需要外部索引var
函数幻灯片放映（索引）{
var url=imagePath+“/”+index+“.jpg”；
//在当前图像后面添加新图像
$（“#幻灯片放映”）。前置（$（“
​


调用下一个幻灯片放映功能：

您可以使用模数运算符
%
从除法中获取余数，而不是使用循环变量，您必须在
幻灯片（）之外设置
函数，只需传递要在其中显示的照片作为参数…然后可以使用
slideShow（当前+1）
调用setTimeout中的下一个showImage。实际上，
slideShow（（索引%lastImage）+1）
。最好使用匿名函数或带有
setTimeout的引用，而不要使用eval。
使用css（“显示”、“块”）更改show（）也不能解决问题。$（“#slideShowFront”）.css（“显示”、“块”）；$（“#slideShowBack”）.css（“显示”、“块”）；不确定您是否修复了它，但它在Chrome 6.0.472.62Hi-DMan上对我来说不会闪烁。太奇怪了-我降级到6.0.472.62，它会闪烁，但我有一个朋友在Linux上的Chrome中查看了它，它工作正常。嗨，Peter，我降级到Chrome 6.0.472.62，并将您的代码放在这个示例中：。它会很好地褪色一次，然后在每个子集上闪烁有趣的变化。无论哪种方式，我都非常感谢您的重写。@Robert-由于CSS，您在评论中链接到的页面与OP中的页面不同。闪烁是由半透明的外边框引起的。当两幅图像都显示时，两个边框重叠，因此边框突然变暗。您可以创建一个父DIV来保存im年龄和只交换图像，同时保持父DIV不变。谢谢@Peter-我会尽快尝试一下。好吧，非常确定我去掉了边框，仍然看到闪烁。甜蜜的是，当我重新添加花式边框时，它不会闪烁；相反，它几乎没有脉冲（这本身就是一种非常酷的效果）.然后我将边框效果移动到包围的DIV中，所有闪烁和脉冲都消失了。我已经实现了jQuery zen.：D