如何使用javascript淡入和淡出图像答案

【问题标题】：How to fadeIn and fadeOut an image using javascript如何使用javascript淡入和淡出图像
【发布时间】：2015-05-19 20:47:53
【问题描述】：

我正在用 JavaScript 创建一个图像滑块，我想在不使用 jQuery 的情况下添加像 fadeIn 和 fadeOut 这样的效果。

html:

<body>
<img src="images/1.jpg" alt=""  id="slide" width="700px" height="340px" > 
 </body>

JavaScript：

var slideshow = new Array();

slideshow[0] = new Image();
slideshow[0].src= "images/1.jpg";

slideshow[1] = new Image();
slideshow[1].src= "images/2.jpg";

slideshow[2] = new Image();
slideshow[2].src= "images/3.jpg";


var inc = 0;

function slide(){
document.getElementById('slide').src = slideshow[inc].src;
if(inc<2)
inc++;
else
inc = 0;
setTimeout("slide()",2000);
}
slide();

【问题讨论】：

你为什么不想使用jquery？
你觉得css怎么样？ (css3)
你看过这里吗：stackoverflow.com/questions/13733912/… 或这里：jsfiddle.net/gabrieleromanato/cMp7s
如果我使用 css 动画，那么它在某些浏览器中将不起作用。

标签： javascript html slideshow

【解决方案1】：

您不能仅使用 Javascript 来实现，因为 CSS 控制不透明度以进行褪色。但有你的线索。使用 javascript 来控制图像的不透明度，因为在您的评论中，您说您不想使用 CSS 动画属性，并且 opacity 应该适用于每个浏览器。

【讨论】：