javascript - 为什么这个幻灯片闪烁？

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

闪烁有两种可能的原因。

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

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

第二个是当你 .show() 正面图像覆盖背面图像。即使正面图像现在与背面图像相同，也可能会导致瞬间闪烁。

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

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

我还会将所有变量和函数包含在一个自调用匿名函数中，这样您就不会弄乱全局命名空间:(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而不是评估。