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 41 <div id="tuijian" style=" background-image:url(1.jpg);"> 42 <div class="pages" id="p1" onclick="dodo(-1)"></div> 43 <div class="pages" id="p2" onclick="dodo(1)"></div> 44 </div> 45 </body> 46 </html> 47 <script language="javascript"> 48 var jpg =new Array(); 49 jpg[0]="url(1.jpg)"; 50 jpg[1]="url(2.jpg)"; 51 jpg[2]="url(3.jpg)"; 52 var tjimg = document.getElementById("tuijian"); 53 var xb=0; 54 var n=0; 55 56 function huan() 57 { 58 xb++; 59 if(xb == jpg.length) 60 { 61 xb=0; 62 } 63 tjimg.style.backgroundImage=jpg[xb]; 64 if(n==0) 65 { 66 var id = window.setTimeout("huan()",3000); 67 } 68 } 69 70 function dodo(m) 71 { 72 n=1; 73 xb = xb+m; 74 if(xb < 0) 75 { xb = jpg.length-1; 76 } 77 else if(xb >= jpg.length) 78 { xb = 0; 79 } 80 tjimg.style.backgroundImage=jpg[xb]; 81 } 82 window.setTimeout("huan()",3000); 83 </script>