Question

我无法找到任何易于集成到我的代码的JavaScript解决方案。而且我不想复制我希望理解的粘贴。

我有一个基本的javascript函数，可以每3秒更改一次图像，我希望在转换时让图像渐变，使其看起来更漂亮。

JS：

<script type = "text/javascript">
         function nextImage() {
              x = (x === imgArray.length - 1) ? 0 : x + 1;
             document.getElementById("img").src = imgArray[x];
          }

          function begintimer() {
              setInterval(nextImage, 3000);
          }

          var imgArray = [], x = -1;
          imgArray[0] = "images/test.jpg";
          imgArray[1] = "images/bg.jpg";
</script>

HTML：

<body onload = "begintimer()">
    <div id="section1">
        <img id="img" src="images/bg.jpg"/>
    </div>
</body>

感谢您的帮助！

Answer 1

如果有人遇到这个，这是最简单，最全面的版本我最终使用jquery和javascript进行编码：

<script src="jquery.js"></script>
<script type = "text/javascript">
         function nextImage() {
            x = (x === imgArray.length - 1) ? 0 : x + 1;
            $("#img").fadeOut(400, function() {
                $("#img").attr("src",imgArray[x]);
            }).fadeIn(400);
         }

         function begintimer() {
            setInterval(nextImage, 5000);
         }

         var imgArray = [], x = -1;
         imgArray[0] = "images/test.jpg";
         imgArray[1] = "images/bg.jpg";
</script>

Javascript图像褪色

1 个答案: