<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript</title> <style type="text/css"> *{ margin:0px auto; padding:0px; font-family:"微软雅黑";} #tuijian{ width:760px; height:350px; background-repeat:no-repeat; background-size:cover;} .pages{ top:200px; background-color:#000; background-position:center; background-repeat:no-repeat; opacity: 0.4; width: 30px; height:60px; } #p1{ background-image:url(11.jpg); float:left; margin:150px 0px 0px 10px; } #p2{ background-image: url(22.jpg); float:right; margin:150px 10px 0px 0px;} </style> </head> <body> <div id="tuijian" style=" background-image:url(1.jpg);"> <div class="pages" id="p1" onclick="dodo(-1)"></div> <div class="pages" id="p2" onclick="dodo(1)"></div> </div> </body> </html> <script language="javascript"> var jpg =new Array(); jpg[0]="url(1.jpg)"; jpg[1]="url(2.jpg)"; jpg[2]="url(3.jpg)"; var tjimg = document.getElementById("tuijian"); var xb=0; var n=0; function huan() { xb++; if(xb == jpg.length) { xb=0; } tjimg.style.backgroundImage=jpg[xb]; if(n==0) { var id = window.setTimeout("huan()",3000); } } function dodo(m) { n=1; xb = xb+m; if(xb < 0) { xb = jpg.length-1; } else if(xb >= jpg.length) { xb = 0; } tjimg.style.backgroundImage=jpg[xb]; } window.setTimeout("huan()",3000); </script>