javascript - 带有淡入淡出动画的自动照片 slider - 仅限 JavaScript

Question

我做了一个 5 幅图像的 slider ，它可以在几秒钟内循环自动更改图像。 我想要在更改每个图像之前和之后淡出和淡出动画。 这是我的代码:

HTML:

<div id="slider"> <img id="bigImage" src="img/Traffic1.jpg"> </div>

JS:

var imageArray = ["img/Traffic1.jpg", "img/Traffic2.jpg", "img/Traffic3.jpg",
        "img/Traffic4.jpg","img/Traffic5.jpg"]; 
        var imageIndex = 0;
        function changeImageByTimer() {
        document.getElementById("bigImage").src = imageArray[imageIndex];

        imageIndex++;

            if (imageIndex > 4) {
                imageIndex = 0;
            }
        }

        var imgTimer = setInterval(changeImageByTimer, 3000);

我不能只更改 javascript 的 html 代码。我更喜欢只使用 javascript。 有什么建议吗？

Answer 1

因此，这是一个非常简单的 JavaScript 实现。如果您想稍微自定义一下，您将需要阅读 jQuery，特别是动画。

这是工作的 jsBin:http://jsbin.com/pozutidu/5/edit?html,js,output

本质上，唯一重要的方面是:

  bigImage.animate({opacity: .1 }, function() { 

      $(this).attr('src', imageArray[imageIndex]) 

  });

那么这里发生的事情是，您选择了 Img，并为其不透明度设置动画。一旦不透明度达到 .1，回调函数将采用相同的元素并重新放置 img.src。这会产生淡入淡出的图像外观。

要查看的引用资料:http://jquery.com/ , http://api.jquery.com/animate/

在运行之前，您必须包含指向 jQuery 源文件的链接

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>