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() 背面图像上的正面图像。即使正面图像现在与背面图像相同，也可能导致瞬间闪烁。

我会稍微改变一下这个问题。

只用一个图像启动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。

为什么这个幻灯片闪烁？

1 个答案:

jsFiddle