1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style> 7 #left{ position:absolute; left:0; top:0; 50%; height:100%; background:red; opacity:0; filter:alpha(opacity:0);} 8 #right{ position:absolute; right:0; top:0; 50%; height:100%; background:#ccc; opacity:0; filter:alpha(opacity:0);} 9 a{ cursor:default;} 10 body {margin:0;} 11 img {640px; height:378px; position:absolute; left:50%; top:50%; margin-top:-189px; margin-left:-320px;} 18 </style> 19 <script> 20 window.onload=function(){ 21 var oLeft=document.getElementById('left'); 22 var oRight=document.getElementById('right'); 23 var oImg=document.getElementById('img1'); 24 var timer=null; 25 var count=null; 26 27 oLeft.onmouseover=function(){ 28 29 clearInterval(timer); 30 timer=setInterval(function(){ 31 count++; 32 oImg.src='img/'+count+'.jpg'; 33 if(count==76){ 34 count=0; 35 } 36 },100) 37 38 39 } 40 oRight.onmouseover=function(){ 41 clearInterval(timer); 42 timer=setInterval(function(){ 43 count--; 44 oImg.src='img/'+count+'.jpg'; 45 if(count<1){ 46 count=76; 47 } 48 },100) 49 50 51 } 52 } 53 </script> 54 </head> 55 56 <body> 57 <img id="img1" src="img/0.jpg" /> 58 <a href="javascript:;" id="left"></a> 59 <a href="javascript:;" id="right"></a> 60 </body> 61 </html>