javascript:图片浏览器
1 <html> 2 <head> 3 <title>1</title> 4 <style type='text/css'> 5 img{ 6 border-width:0px; 7 } 8 #waiting{ 9 } 10 #picture{ 11 display:none; 12 } 13 #photo_div{ 14 margin:0px auto; 15 padding-top:200px; 16 border:solid 0px green; 17 text-align:center; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="photo_div"> 23 <img src='pic/loading.gif' id='waiting'/> 24 <img src='pic/2.jpg' id='picture' onload="show();" onmousemove="cursor();" onclick="change();"/> 25 </div> 26 <script language='javascript'> 27 var img0=document.getElementById('waiting'); 28 var img=document.getElementById('picture'); 29 var photo_div=document.getElementById('photo_div'); 30 var array=['1.jpg','2.jpg','3.jpg','4.jpg','j20.jpg','t-50.jpg'];//图片文件名依次录入 31 var index=1;//因为一开始是2.jpg,所以index=1 32 var flag=''; 33 function show(){ 34 img0.style.display='none'; 35 img.style.display='block'; 36 photo_div.style.paddingTop='40px'; 37 if(flag=='left'){ 38 if(index==0) 39 img.style.cursor='auto'; 40 else 41 img.style.cursor='pic/pre.cur'; 42 }else if(flag=='right'){ 43 if(index==array.length-1) 44 img.style.cursor='auto'; 45 else 46 img.style.cursor='pic/next.cur'; 47 } 48 } 49 function cursor(){ 50 var leftpart=img.offsetWidth/2; 51 if(event.offsetX<=leftpart){ 52 if(index>0) 53 img.style.cursor='pic/pre.cur';/*注意不是url('pic/pre.cur')*/ 54 else 55 img.style.cursor='auto'; 56 }else{ 57 if(index<array.length-1) 58 img.style.cursor='pic/next.cur'; 59 else 60 img.style.cursor='auto'; 61 } 62 //6-39.html 63 } 64 function change(){ 65 var leftpart=img.offsetWidth/2; 66 if(event.offsetX<=leftpart){ 67 if(index-1>=0){ 68 img.style.display='none'; 69 index--; 70 img.src='pic/'+array[index]; 71 flag='left'; 72 } 73 }else{ 74 if(index+1<=array.length-1){ 75 img.style.display='none'; 76 index++; 77 img.src='pic/'+array[index]; 78 flag='right'; 79 } 80 } 81 82 } 83 </script> 84 </body> 85 </html>