为什么这张幻灯片闪烁？

Question

我在我的博客上发布了一个示例 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>

任何帮助将不胜感激！

抢 :)

Answer 1

造成闪烁的可能原因有 2 个。

第一个来自 $('#slideShowBack').show(); 行。

只需删除该行即可，因为它什么也不做，因为 #slideShowBack 的可见性永远不会改变。

第二个是当您 .show() 正面图像覆盖背面图像。尽管现在正面图像与背面图像相同，但它可能会导致短暂的闪烁。

我会稍微不同地处理这个问题。

1. 仅使用一个图像开始 HTML 页面（这在语义上更有意义，因为第二个图像不可见......您也可以从 DOM 中的所有图像开始，但这是一种不同的方法）。
2. 使用图像 #2 首次调用幻灯片功能。
3. 幻灯片 - 将新图像添加到当前图像后面的 DOM
4. 幻灯片 - 淡出当前图像，显示其后面的新图像。
5. 幻灯片 - 从 DOM 中删除刚刚褪色的图像。
6. 幻灯片 - 暂停后，使用下一张图像调用幻灯片，

我还将把所有变量和函数封装在一个自调用匿名函数中，这样就不会弄乱全局命名空间： (function() { /* Everything在这里 */ })();。

代码中最重要的变化是我不会突然将一个图像 .show() 放在另一个图像之上，因此不存在可能的闪烁源。我还使用了 .fadeOut()< 中的回调函数/a>。这只是淡入淡出完成后调用的函数：

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。