HTML代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 *{ 8 margin:0px; 9 padding:0px; 10 font-family:"微软雅黑";} 11 12 13 #tuijian{ 14 width:940px; 15 height:500px; 16 background-repeat:no-repeat; 17 margin:auto; 18 } 19 .pages{ 20 line-height:500px; 21 background-color:#000; 22 background-position:center; 23 background-repeat:no-repeat; 24 opacity:0.4; 25 width:30px; 26 height:60px; 27 } 28 #p1 { 29 background-image:url(1.jpg); 30 float:left; 31 margin:180px 0px 0px 10px;} /*上 右 下 左*/ 32 #p2{ 33 background-image:url(2.jpg); 34 float:right; 35 margin:180px 10px 0px 0px;} 36 37 </style> 38 </head> 39 40 <body> 41 42 <div id="tuijian" style="background-image:url(9.jpg)"> 43 <div class="pages" id="p1" onclick="dodo(-1)"></div> 44 <div class="pages" id="p2" onclick="dodo(1)"></div> 45 46 47 </div> 48 49 </body> 50 </html> 51 <script type="text/javascript"> 52 var jpg=new Array(); 53 jpg[0]="url(9.jpg)"; 54 jpg[1]="url(11.jpg)"; 55 jpg[2]="url(20.jpg)"; 56 var tjimg=document.getElementById("tuijian"); 57 var xb=0; 58 var n=0; 59 function huan() 60 { 61 xb++; 62 if(xb==jpg.length) 63 { 64 xb=0; 65 } 66 67 tjimg.style.backgroundImage=jpg[xb]; 68 if(n==0) 69 { 70 window.setTimeout("huan()",2000); 71 } 72 } 73 function dodo(m) 74 { 75 n=1; 76 xb=xb+m; 77 if(xb<0) 78 { 79 xb=jpg.length-1; 80 } 81 else if(xb>=jpg.length) 82 { 83 xb=0; 84 } 85 tjimg.style.backgroundImage=jpg[xb]; 86 } 87 window.setTimeout("huan()",2000); 88 </script>
效果为：
