//---------使用了z-index和复杂的时间控制完成了照片簿的功能，兼容各大浏览器
//----测试结果-----不知道为什么换成IE之后变得移动特别特别慢，可能是渲染的问题
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>photoAlbum</title> 6 </head> 7 <style type="text/css"> 8 #box{ 600px;height: 300px;overflow: hidden;left:350px;top:100px;position: absolute;} 9 img{ 500px;height: 300px;position: absolute;} 10 span{height: 300px; 20px;position: absolute;background: #BBB;z-index: 3;} 11 </style> 12 <script type="text/javascript"> 13 window.onload=function(){ 14 var color=["#ABC","#BCD","#CDE","#DEF","#789","#456"]; 15 var timer; 16 var order=-1; 17 var iSpeed=0; 18 var flag=0; 19 var snapCount=0; 20 oDiv=document.getElementById('album'); 21 oImg=document.getElementsByTagName('img'); 22 oSpan=document.getElementsByTagName('span'); 23 oImg[0].style.zIndex=1; 24 function homing(offset){ 25 oImg[order+1].style.left=oDiv.offsetLeft+order*20+20+offset+'px'; 26 oSpan[order].style.left=oDiv.offsetLeft+order*20+offset+'px'; 27 } 28 function move(){ 29 if((oSpan[order].offsetLeft>=order*20+oDiv.offsetLeft&&iSpeed<0)||(oSpan[order].offsetLeft<=order*20+500+oDiv.offsetLeft&&iSpeed>0)){ 30 oImg[order+1].style.left=oImg[order+1].offsetLeft+iSpeed+'px'; 31 oSpan[order].style.left=oSpan[order].offsetLeft+iSpeed+'px'; 32 } 33 else{ 34 if(iSpeed<0) homing(0); 35 else if(iSpeed>0) homing(500); 36 clearInterval(timer); 37 flag=1; 38 } 39 } 40 for(count=0;count<oSpan.length;count++){ 41 oSpan[count].style.left=oDiv.offsetLeft+500+count*20+'px'; 42 oSpan[count].style.backgroundColor=color[count]; 43 oSpan[count].index=count; 44 oSpan[count].onmouseover=function(){ 45 if(this.index==order){ 46 if(flag==0) return false; 47 else iSpeed=-iSpeed; 48 } 49 else if(this.index>order){ 50 iSpeed=-4; 51 oImg[this.index+1].style.left=oDiv.offsetLeft+520+this.index*20+'px'; 52 if(order!=-1) homing(0); 53 } 54 else { 55 iSpeed=4; 56 oImg[this.index+1].style.left=oDiv.offsetLeft+20+this.index*20+'px'; 57 homing(500); 58 } 59 flag=0; 60 clearInterval(timer); 61 for(snapCount=0;snapCount<oImg.length;snapCount++) {oImg[snapCount].style.zIndex=0;} 62 order=this.index; 63 oImg[this.index].style.zIndex=1; 64 oImg[this.index+1].style.zIndex=2; 65 for(snapCount=0;snapCount<this.index;snapCount++)oSpan[snapCount].style.left=snapCount*20+oDiv.offsetLeft+'px'; 66 for(snapCount++;snapCount<oSpan.length;snapCount++) oSpan[snapCount].style.left=snapCount*20+oDiv.offsetLeft+500+'px'; 67 timer=setInterval(function(){move();},10); 68 } 69 } 70 } 71 </script> 72 <body> 73 <div id="box"> 74 <div id="album"> 75 <img src="pic/photo0.jpg"> 76 <img src="pic/photo1.jpg"> 77 <img src="pic/photo2.jpg"> 78 <img src="pic/photo3.jpg"> 79 <img src="pic/photo4.jpg"> 80 <img src="pic/photo5.jpg"> 81 <span>相片一</span> 82 <span>相片二</span> 83 <span>相片三</span> 84 <span>相片四</span> 85 <span>相片五</span> 86 </div> 87 </div> 88 </body> 89 </html>