定义和用法 fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。 语法 $(selector).fadeIn(speed,[callback])
fadeOut定义和用法 fadeOut() 方法用于淡出可见元素。 语法 $(selector).fadeOut(speed,[callback]);
html片段 <div class="news" id="news" > <ul class="news_image" id="news_image"> <li ><img src="images/3.jpg" alt=""></li> <li ><img src="images/1.jpg" alt=""></li> <li ><img src="images/0.jpg" alt=""></li> </ul> </div> css片段 .news { width: 398px; height: 420px; margin: 100px 0 0 106px; } .news img { width: 398px; height: 420px; float: left; position: absolute; }说明：position:absolute配合float浮动来形成三张图片的叠加效果，默认情况下，叠放顺序依次为3.jpg、1.jpg、0.jpg。
js片段One 首先写个“空壳”函数。
function fadeIn_Out(obj){ //curIndex当前图片索引 //timer计时器 }Two 往“肚子”里塞东西。
function fadeIn_Out(obj){ var num = 0;//num 计数 var elems = document.getElementById("news").getElementsByTagName("li");// 获取待会要操作的元素 }Three “消化”食物：obj是Number类型，遍历取出li中的元素，假设当前elems[i].index与obj相等，则该元素opacity置为1，其余元素opacity置为0。setInterval(fn,time)中的time为100，一秒钟完成透明度的转换的意思，具体视觉体验可以自己更改数值。
function fadeIn_Out(obj){ var num = 0; timer = setInterval(function(){ num++; var elems = document.getElementById("news").getElementsByTagName("li"); for(var i = 0; i < elems.length ; i++){ if(i == obj){ elems[i].style.opacity = num/10; } else{ elems[i].style.opacity = 0; } } if(num>=10){ clearInterval(timer); } },100); }Four 吃饱了没事干，女神在召唤
var niLen = $(".news_image li").length ; var fadeTimer = setInterval(function() { if (curIndex < niLen-1) { curIndex++; } else { curIndex = 0 } fadeIn_Out(curIndex); }, 3000);Five 写着写着功能实现了，fadeOut()假装是opacity=0实现的，fadeIn()假装是opacity=1实现的，就这么说~假装~~ IE浏览器玩家自行百度filter:alpha(opacity)设置透明度。 Six 知识大放送环节
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; list-style: none; } .news { width: 398px; height: 420px; margin: 72px 0 0 106px; } .news img { width: 398px; height: 420px; float: left; position: absolute; } </style> </head> <body> <div class="news" id="news" > <ul class="news_image " id="news_image"> <li ><img class="img1" src="images/3.jpg" alt=""></li> <li ><img class="img2" src="images/1.jpg" alt=""></li> <li ><img class="img3" src="images/0.jpg" alt=""></li> </ul> </div> </body> <script> var curIndex = 0; var timer; var elems = document.getElementById("news").getElementsByTagName("li"); function fadeIn_Out(obj){ clearInterval(timer); var num = 0; timer = setInterval(function(){ num++; for(var i = 0; i < elems.length ; i++){ i == obj?elems[i].style.opacity = num/10: elems[i].style.opacity = 0; } if(num>=10){ clearInterval(timer); } },100); } setInterval(function() { var niLen = elems.length ; if (curIndex < niLen - 1) { curIndex++; } else { curIndex = 0 } fadeIn_Out(curIndex); }, 3000); </script> </html>结束语：小白初来乍到，写的不对的地方，拜托拜托大家予以批评指正。附上另外一种思路，完成淡入淡出的效果—-通过添加className给其添加类选择器，在css中使其opacity为0/1。
var liList = $(".news_image").find("li"); var num = 0; var timer; function play(num) { for (i = 0; i < liList.length; i++) { liList[i].className = ""; } liList[num].className = "on"; } timer = setInterval(function() { play(num); num++; if (num == liList.length) { num = 0; } }, 1500);最后的最后，灰常感谢提供思路的帖子，以上每个字母都是自己敲的，如有吻合，英雄所见略同~~ 附上提供思路参考的链接：猪大大的传送门
