中途转换的时候会跳一下，希望以后的自己有能力改过来
一一匹配版onmouseove,可以换成onclick
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } #lun { width: 560px; height: 305px; border: 1px solid #C5E300; margin: 100px auto; position: relative; } #lun ul li { position: absolute; left: 0px; top: 0px; display: none; } #lun ul li img { display: block; width: 560px; height: 305px; } #lun ol { position: absolute; width: 240px; left: 50%; bottom: 20px; margin-left: -120px; } #lun ol li { height: 20px; width: 20px; background: orange; margin-right: 10px; float: left; border-radius: 50%; } #lun ol li.active { background: greenyellow; } </style> </head> <body> <div id="lun"> <ul> <li style="display: block;"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048246&di=ecc3726680a4b198deb9d2f16f4d88f6&imgtype=0&src=http://cnews.chinadaily.com.cn/img/attachement/jpg/site1/20170307/bc305bcee6d91a2834a52a.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048247&di=d4c55130d5e332a8214df58198620328&imgtype=0&src=http://cnews.chinadaily.com.cn/img/attachement/jpg/site1/20170307/bc305bcee6d91a2834a529.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048248&di=5ef12c116ac9e64bfcecde4fcd4703d2&imgtype=0&src=http://cnews.chinadaily.com.cn/img/attachement/jpg/site1/20170307/bc305bcee6d91a2834a528.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048248&di=fd1f6648acebdaea511907a35050da5d&imgtype=0&src=http://cnews.chinadaily.com.cn/img/attachement/jpg/site1/20170307/bc305bcee6d91a2834a527.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048249&di=e673d4b7bb034edb5cd46faa401554b4&imgtype=0&src=http://cnews.chinadaily.com.cn/img/attachement/jpg/site1/20170307/bc305bcee6d91a2834a526.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129043686&di=510e4e3af4608e4f402faf745945c878&imgtype=0&src=http://upload.gezila.com/data/20170520/29501495243031.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129043672&di=7c1a8fa0c7083e28af292da2eb15a898&imgtype=0&src=http://newsimg.5054399.com/uploads/userup/1610/1111364W3D.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129358936&di=fd5075eed512734799df63e3d3b01e9c&imgtype=0&src=http://img.pipaw.net/wy/title/2016/03/14/368e343b51c3a1da72565abfc37974ff.jpg" /></li> </ul> <ol> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> <!--<a href="javascript:;"><</a> <a href="javascript:;">></a> --> </div> <script type="text/javascript"> var oBtn1 = document.getElementsByTagName("ul")[0].getElementsByTagName("li"); var oBtn2 = document.getElementsByTagName("ol")[0].getElementsByTagName("li"); var num = 0; for(var i = 0; i < oBtn2.length; i++) { oBtn2[i].index = i; //自定义索引 oBtn2[i].onmouseover = function() { num = this.index; for(var i = 0; i < oBtn2.length; i++) { oBtn2[i].className = ""; oBtn1[i].style.display = "none"; } oBtn2[num].className = 'active'; oBtn1[num].style.display = "block"; //alert(this.index)把当前的索引给图片 } } </script> </body> </html>下面这是完整版，一开始小编时用display来做的，后来因为要用到渐变效果就改为了opacity。
整体思路1.html和css布局
2.自定义索引，图片跟圆点一一对应（防止代码冗余，封装了一个函数）
3.箭头显示隐藏与切换
4.自动播放（这个方法非常实用，哈哈）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } #lun { width: 560px; height: 305px; border: 1px solid #C5E300; margin: 100px auto; position: relative; } #lun ul li { position: absolute; left: 0px; top: 0px; opacity: 0; filter:alpha(opacity=0); transition: all .5s; } #lun ul li img { display: block; width: 560px; height: 305px; } #lun ol { position: absolute; width: 240px; left: 50%; bottom: 20px; margin-left: -120px; } #lun ol li { height: 20px; width: 20px; background: orange; margin-right: 10px; float: left; border-radius: 50%; cursor: pointer; } #lun ol li.active { background: greenyellow; } #left, #right { position: absolute; font-size: 60px; color: white; text-decoration: none; top: 120px; opacity: 0; } #left { left: 20px; } #right { right: 20px; } </style> </head> <body> <div id="lun"> <ul> <li style="opacity: 1"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048246&di=ecc3726680a4b198deb9d2f16f4d88f6&imgtype=0&src=http://cnews.chinadaily.com.cn/img/attachement/jpg/site1/20170307/bc305bcee6d91a2834a52a.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048247&di=d4c55130d5e332a8214df58198620328&imgtype=0&src=http://cnews.chinadaily.com.cn/img/attachement/jpg/site1/20170307/bc305bcee6d91a2834a529.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048248&di=5ef12c116ac9e64bfcecde4fcd4703d2&imgtype=0&src=http://cnews.chinadaily.com.cn/img/attachement/jpg/site1/20170307/bc305bcee6d91a2834a528.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048248&di=fd1f6648acebdaea511907a35050da5d&imgtype=0&src=http://cnews.chinadaily.com.cn/img/attachement/jpg/site1/20170307/bc305bcee6d91a2834a527.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048249&di=e673d4b7bb034edb5cd46faa401554b4&imgtype=0&src=http://cnews.chinadaily.com.cn/img/attachement/jpg/site1/20170307/bc305bcee6d91a2834a526.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129043686&di=510e4e3af4608e4f402faf745945c878&imgtype=0&src=http://upload.gezila.com/data/20170520/29501495243031.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129043672&di=7c1a8fa0c7083e28af292da2eb15a898&imgtype=0&src=http://newsimg.5054399.com/uploads/userup/1610/1111364W3D.jpg" /></li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129358936&di=fd5075eed512734799df63e3d3b01e9c&imgtype=0&src=http://img.pipaw.net/wy/title/2016/03/14/368e343b51c3a1da72565abfc37974ff.jpg" /></li> </ul> <ol> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> <a href="javascript:;" id="left"><</a> <a href="javascript:;" id="right">></a> </div> <script type="text/javascript"> var oBtn1 = document.getElementsByTagName("ul")[0].getElementsByTagName("li"); var oBtn2 = document.getElementsByTagName("ol")[0].getElementsByTagName("li"); var lunBo = document.querySelector("#lun"); var oL = document.getElementById("left"); var oR = document.getElementById("right"); var num = 0; for(var i = 0; i < oBtn2.length; i++) { oBtn2[i].index = i; //自定义索引,此行很重要！！！ oBtn2[i].onmouseover = function() { num = this.index; lunbotu() }; } //箭头的显示与隐藏 lunBo.onmouseover = function() { oL.style.opacity = 1; oR.style.opacity = 1; clearInterval(timer) }; lunBo.onmouseout = function() { oL.style.opacity = 0; oR.style.opacity = 0; timer = setInterval(function() { oR.onclick() }, 1000) }; //左右箭头的切换 oR.onclick = function() { if(num >= oBtn2.length-1) {//长度别忘记减1； num = 0; } else { num++; } lunbotu() } //LEFT oL.onclick = function() { if(num <= 0) { num = oBtn2.length-1;//长度要减1； } else { num--; } lunbotu() } //RIGHT function lunbotu() { for(var i = 0; i < oBtn2.length; i++) { oBtn2[i].className = ""; oBtn1[i].style.opacity = 0; } oBtn2[num].className = 'active'; oBtn1[num].style.opacity = 1; //alert(this.index)把当前的索引给图片 } //自动播放 var timer = setInterval(function() { oR.onclick() }, 1000)//一般为5到7s，这里因为是demo所以设置的快一些 </script> </body> </html>轮播可以通过控制opacity \display：none\ z-index实现
