大图轮播
<title>无标题</title> <style type="text/css"> *{margin:0 auto; padding:0;} #wai{ 700px; height:500px; overflow:hidden;} .lun{ 700px; height:500px;} #left{ 30px; height:30px; background-color:#09F; position:relative; top:-270px; left:-300px;} #right{ 30px; height:30px; background-color:#09F; position:relative; top:-300px; left:300px;} </style> </head> <body> <div id="wai"> <div class="lun"> <img src="1_lie.jpg" id="a1" width="700" height="500" /> </div> <div class="lun"> <img src="../../timg.jpg" id="a2" width="700" height="500" /> </div> <div class="lun"> <img src="../../a6ee51037df28e181557839619ba6fe5.jpg" id="a3" width="700" height="500" /> </div> <div id="left"></div> <div id="right"></div> </div> </body> </html> <script type="text/javascript"> //找到图片的div var lun = document.getElementsByClassName("lun") //当前显示的索引 var index = 0; window.setInterval("huan()",2000); function huan() { if(index<=1) { index++; }else{ index = 0; } xianshi(index); } //给我一个索引号，显示该索引图片 function xianshi(index) {//让所有的隐藏 for(var i=0;i<lun.length;i++) { lun[i].style.display = "none"; } lun[index].style.display = "block"; } //点击左换图 var l = document.getElementById("left"); l.onclick = function() { if(index>0) { index--; }else{ index = lun.length-1; } xianshi(index); } //点击右换图 var r = document.getElementById("right"); r.onclick = function() { if(index<=1) { index++; }else { index = 0; } xianshi(index); } </script>
效果图
