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>JavaScript</title> 6 <style type="text/css"> 7 *{ 8 margin:0px auto; 9 padding:0px; 10 font-family:"微软雅黑";} 11 12 #tuijian{ 13 width:760px; 14 height:350px; 15 background-repeat:no-repeat; 16 background-size:cover;} 17 18 .pages{ 19 top:200px; 20 background-color:#000; 21 background-position:center; 22 background-repeat:no-repeat; 23 opacity: 0.4; 24 width: 30px; 25 height:60px; } 26 27 #p1{ 28 background-image:url(11.jpg); 29 float:left; 30 margin:150px 0px 0px 10px; }//左右控制器样式 31 32 #p2{ 33 background-image: url(22.jpg); 34 float:right; 35 margin:150px 10px 0px 0px;} 36 </style> 37 </head> 38 39 <body> 40 <div id="tuijian" style=" background-image:url(1.jpg);"> 41 <div class="pages" id="p1" onclick="dodo(-1)"></div> 42 <div class="pages" id="p2" onclick="dodo(1)"></div> 43 </div> 44 </body> 45 </html> 46 <script language="javascript"> 47 var jpg =new Array(); 48 jpg[0]="url(1.jpg)"; 49 jpg[1]="url(2.jpg)"; 50 jpg[2]="url(3.jpg)"; 51 var tjimg = document.getElementById("tuijian"); 52 var xb=0; 53 var n=0; 54 55 function huan() 56 { 57 xb++; 58 if(xb == jpg.length) 59 { 60 xb=0; 61 } 62 tjimg.style.backgroundImage=jpg[xb]; 63 if(n==0) 64 { 65 var id = window.setTimeout("huan()",3000); 66 } 67 } 68 69 function dodo(m) 70 { 71 n=1; 72 xb = xb+m; 73 if(xb < 0) 74 { xb = jpg.length-1; 75 } 76 else if(xb >= jpg.length) 77 { xb = 0; 78 } 79 tjimg.style.backgroundImage=jpg[xb]; 80 } 81 window.setTimeout("huan()",3000); 82 </script>