图片转换最基本的跳转，有左右两侧按钮可以切换图片，下方有小圆点可以选择图片
<html> <head> <meta charset="utf-8"> <title>轮播图</title> <style type="text/css"> *{margin:0 auto; padding:0;} #lbt{ width:800px; height:500px; overflow:hidden; margin-top:50px;} .tu{ width:800px; height:500px; display:none;} #key{ width:750px; height:0px;} #kleft{ width:50px; height:50px; background-color:#FFF; border-radius:25px; float:left; position:relative; top:-275px; opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50); font-size:36px; color:#000; line-height:50px; text-align:center;} #kright{ width:50px; height:50px; background-color:#FFF; border-radius:25px; float:right; position:relative; top:-275px; opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50); font-size:36px; color:#000; line-height:50px; text-align:center;} #kleft,#kright:hover{ cursor:pointer;} #xuan{ width:80px; height:20px; position:relative; top:-50px;} .xd{ width:10px; height:10px; margin:5px; float:left; background-color:#fff; border-radius:5px; opacity:0.5;-moz-opacity:0.5;} </style> </head> <body> <div id="lbt"> <div class="tu" style="display:block"><img src="images/lunbo1.jpg"/></div> <div class="tu"><img src="images/lunbo2.jpg"/></div> <div class="tu"><img src="images/lunbo3.jpg"/></div> <div class="tu"><img src="images/lunbo4.jpg"/></div> </div> <div id="xuan"> <div class="xd" xl="0" style="opacity:1;-moz-opacity:1;"></div> <div class="xd" xl="1"></div> <div class="xd" xl="2"></div> <div class="xd" xl="3"></div> </div> <div id="key"> <div id="kleft"><</div> <div id="kright">></div> </div> </body> </html> <script type="text/javascript"> var tu = document.getElementsByClassName("tu"); var xd = document.getElementsByClassName("xd"); var sy = 0; window.setInterval("tiao()",5000); /* 索引每次加1，超过3就返回到0从头开始，然后调用函数huan() */ function tiao() { sy++; if(sy>3) { sy = 0; } huan(); } /* 换到现在的索引对应的图 */ function huan() { for(var i=0;i<tu.length;i++) { tu[i].style.display = "none"; xd[i].style.opacity = "0.5"; xd[i].style.MozOpacity = "0.5"; } tu[sy].style.display = "block"; xd[sy].style.opacity = "1"; xd[sy].style.MozOpacity = "1"; } /* 点击左侧圆点换到上一张图 */ var kl = document.getElementById("kleft"); kl.onclick = function() { sy--; if(sy<0) { sy=3; } huan(); } /* 点击右侧圆点换到下一张图 */ var kr = document.getElementById("kright"); kr.onclick = function() { sy++; if(sy>3) { sy = 0; } huan(); } /* 点击下方圆点直接跳转到相应的图片 */ for(var i=0;i<xd.length;i++) { xd[i].onclick = function() { var syh = parseInt(this.getAttribute("xl")); sy = syh ; huan(); } } </script>
效果 