<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> * <!--图片轮播css样式表代码--> { margin:0px auto; padding:0px; } #tuijian { background-image:url(dasd/1.png); background-size:cover; top:290px; height:325px; width:610px; left:27.5%; position:absolute; } .pages { background-position:center; opacity:0.4; width:78px; height:110px; } #p1 { background-image:url(images/jiantou1.png); float:left; margin:130px 10px 0px 10px; } #p2 { background-image:url(images/jiantou2.png); float:right; margin:130px 10px 0px 0px; } </style> </head> <body> <!--图片轮播网页显示部分代码--> <div id="tuijian" > <div class="pages" id="p1" onClick="dodo(-1)"></div> <div class="pages" id="p2" onClick="dodo(1)"></div> </div> </body> <!--图片手动与自动的切换--> <script language="javascript"> var jpg =new Array(); jpg[0]= "url(dasd/1.png)" ; jpg[1]= "url(dasd/2.png)" ; jpg[2]= "url(dasd/3.png)" ; jpg[3]= "url(dasd/4.png)" ; jpg[4]= "url(dasd/5.png)" ; var a=document.getElementById("tuijian"); var xb=0;var n=0; function huan() {xb++; if(xb>=jpg.length) { xb=0; } a.style.backgroundImage=jpg[xb]; if(n==0) { var id=window.setInterval("huan()",3000); } } function dodo(m) { n=1; xb=xb+m; if(xb<0) { xb=jpg.length-1; } else if(xb>=jpg.length) { xb=0; } a.style.backgroundImage=jpg[xb]; } window.setTimeout("huan()",3000); </script>