通过改变每个图片的opacity属性：
素材图片：
代码一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: ; padding: ; } ul { list-style-type: none; } body { background: #; text-align: center; font: px/px Arial; } #box { position: relative; width: px; height: px; background: #fff; border-radius: px; border: px solid #fff; margin: px auto; } #box .list { position: relative; width: px; height: px; overflow: hidden; border: px solid #ccc; } #box .list li { position: absolute; top: ; left: ; width: px; height: px; opacity: ; transition: opacity .s linear } #box .list li.current { opacity: ; } #box .count { position: absolute; right: ; bottom: px; } #box .count li { color: #fff; float: left; width: px; height: px; cursor: pointer; margin-right: px; overflow: hidden; background: #F; opacity: .; border-radius: px; } #box .count li.current { color: #fff; opacity: .; font-weight: ; background: #f } </style> </head> <body> <div> <ul> <li><img src="https://www.jb51.net/img/images/.jpg"></li> <li><img src="https://www.jb51.net/img/images/.jpg"></li> <li><img src="https://www.jb51.net/img/images/.jpg"></li> <li><img src="https://www.jb51.net/img/images/.jpg"></li> <li><img src="https://www.jb51.net/img/images/.jpg"></li> </ul> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> var box=document.getElementById('box'); var uls=document.getElementsByTagName('ul'); var imgs=uls[].getElementsByTagName('li'); var btn=uls[].getElementsByTagName('li'); var i=index=; //中间量，统一声明； var play=null; console.log(box,uls,imgs,btn);//获取正确 //图片切换, 淡入淡出效果我是用（transition: opacity .s linear）做的,不纠结、简单 在css里面 function show(a){ //方法定义的是当传入一个下标时，按钮和图片做出对的反应 for(i=;i<btn.length;i++ ){ btn[i].className=''; //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。 btn[a].className='current'; } for(i=;i<imgs.length;i++){ //把图片的效果设置和按钮相同 imgs[i].style.opacity=; imgs[a].style.opacity=; } } //切换按钮功能，响应对应图片 for(i=;i<btn.length;i++){ btn[i].index=i; //不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住 btn[i].onmouseover=function(){ show(this.index); clearInterval(play); //这就是最后那句话追加的功能 } } //自动轮播方法 function autoPlay(){ play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了 index++; index>=imgs.length&&(index=);//可能有优先级问题，所以用了括号，没时间测试了。 show(index); },) } autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了 //div的鼠标移入移出事件 box.onmouseover=function(){ clearInterval(play); }; box.onmouseout=function(){ autoPlay(); }; //按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。 </script> </body> </html>
代码二：
首先第一步，下载好一个jquery库的插件，jquery.js 网上很多随处可以下载．下载的插件要放在目录下．然后在html文档中链接好<script type="text/javascript" src="https://www.jb51.net/jQuery.js"></script>
第二步，布局好一个DIV,如：
<div> <p>上一张<p/> <p>下一张<p/> <ul> <li></li> //上面的ｌｉ要设定为显示，因为是第一张图片． <li></li> <li></li> <li></li> </ul> </div>
由于方便各位网友下载能够清晰明了，我就没有用图片路径了，因为到你们电脑上就看不到了，这里用背景颜色．
第三步，就到了写CSS的时候了．下面的CSS懂基础的人都看得懂．