JS平滑交换图像

我已经有了交换图像的功能，但是它们没有任何动画就交换了。现在我想要一个功能，以淡入淡出的图像。这里是我为交换功能编写的代码：JS平滑交换图像

var header = new Array(); 
header[0] = "images/lan/IMG_2799.jpg"; 
header[1] = "images/lan/IMG_2816.jpg"; 


var x = 0; 

function swapHeader() { 
    document.getElementById("header").style.backgroundImage = "url(" + header[x] + ")"; 
    if (x < header.length - 1) x++; else x = 0; 
    setTimeout("swapHeader()", 5000); 
} 
window.onload=swapHeader;

来源

2017-03-19 Sharpy

你只能在2张图像之间淡出，所以背景图像永远不会工作，尝试一个带有2个绝对定位的'img'元素的div，并在它们之间淡入淡出 - 将隐藏的'img'元素的图像更改为'下一个'图像。 –

您可能想要使用两个元素，每个图像一个。然后，缓慢地增加和减少顶部的不透明度（CSS属性）。其余内容应超出这两个要素，并具有透明背景。

来源

2017-03-19 22:02:08

JS平滑交换图像

回答

相关问题