0

所以我有这个在三个图像之间交替的基本脚本，我想添加一个简单的淡入/淡出/淡出或任何看起来最好的东西，这样它就不会那么笨重了。我怎样才能做到这一点？或者，还有更好的方法？

function displayNextImage() {
    x = (x === images.length - 1) ? 0 : x + 1;
    document.getElementById("img").src = images[x];
    }
function displayPreviousImage() {
    x = (x <= 0) ? images.length - 1 : x - 1;
    document.getElementById("img").src = images[x];
    }
function startTimer() {
    setInterval(displayNextImage, 3000);
    }
    var images = [], x = -1;
    images[0] = "assets/img/logo1.png";
    images[1] = "assets/img/logo2.png";
    images[2] = "assets/img/logo3.png";
4

4 回答 4

1

您可以使用以下内容。来源，W3 学校。有关 jQuery 包括的信息，请参见此处

$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").fadeOut()
    });
    $(".btn2").click(function(){
        $("p").fadeIn();
    });
});

但是，这使用 jQuery。根据您的限制，您可能无法使用它。有关fadeIn(time)和fadeOut(time)功能的更多信息，请查看W3 的文章！

于 2017-08-23T08:20:12.710 回答
1

您可以在页面中放置两个图像元素。一个用于当前图像，一个用于下一个图像。

显示图像的时间过去后，在可见图像上应用 CSS 类以将其不透明度转换为 0。

转换完成后，将图像源替换为下一个要显示的图像。将图像元素放置在用户现在可见的图像元素后面，并移除过渡 CSS。

于 2017-08-23T08:18:51.153 回答
1

您可以在更改 src 之前设置图像的不透明度：

function displayNextImage() {
    x = (x === images.length - 1) ? 0 : x + 1;
    var imgvar = document.getElementById("img");
    imgvar.classList.add("fadeOut");
    setTimeout(function() {
        imgvar.src = images[x];
        imgvar.classList.remove("fadeOut");
    }, 500);
}
function displayPreviousImage() {
    x = (x <= 0) ? images.length - 1 : x - 1;
    var imgvar = document.getElementById("img");
    imgvar.classList.add("fadeOut");
    setTimeout(function() {
        imgvar.src = images[x];
        imgvar.classList.remove("fadeOut");
    }, 500);
}
function startTimer() {
    setInterval(displayNextImage, 3000);
}
    var images = [], x = -1;
    images[0] = "assets/img/logo1.png";
    images[1] = "assets/img/logo2.png";
    images[2] = "assets/img/logo3.png";

在 CSS 中：

img {
     opacity: 1;
     transition: opacity 500ms ease-in-out;
}
img.fadeOut {
    opacity: 0;
}

注意：我在 javascript 中添加了 500ms 超时，因为我怀疑否则动画将根本不可见，因为它会立即从可见变为不可见再变为可见。

于 2017-08-23T08:29:16.197 回答
0

每次调用其中一个函数时，您都可以尝试使用 animate.css 为 html 标签设置动画。

https://github.com/daneden/animate.css

于 2017-08-23T08:19:19.527 回答