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>无标题文档</title> 6 <style> 7 *{margin:0;padding:0;font-size:13px;font-family: microsoft yahei} 8 li{list-style:none} 9 #wrap{470px;height:150px;margin:40px auto; } 10 #packet{470px;height:150px;overflow:hidden;position:relative} 11 #packet ul{ position:absolute;top:0;left:0} 12 #slide li{ 470px;height:150px;position:relative;top:0;left:0 } 13 #packet ol{position:absolute;right:5px;bottom:5px;} 14 #packet ol li{20px;height:20px;text-align:center;line-height:20px;background:orange; float: left;margin:0 2px} 15 #packet ol li.active{background:#E54829} 16 </style> 17 <script src="../../../../jquery-1.11.1.min.js"></script> 18 <script> 19 window.onload=function(){ 20 var oPacket=document.getElementById("packet"); 21 var oUl=document.getElementById("slide"); 22 var aLi=oUl.getElementsByTagName("li"); 23 var timer=null; 24 var iNow=0; 25 var iNow2=0; 26 //创建oL 27 var oL=document.createElement("ol"); 28 var str=""; 29 for(var i=0;i<aLi.length;i++) 30 { 31 str+="<li>"+(i+1)+"</li>" 32 } 33 oL.innerHTML=str; 34 oPacket.appendChild(oL); 35 var aLi1=oL.getElementsByTagName("li"); 36 37 function init(){ 38 for(var i=0;i<aLi1.length;i++){ 39 aLi1[i].className='' 40 } 41 aLi1[iNow].className='active' 42 } 43 init(); 44 45 for(var i=0;i<aLi1.length;i++){ 46 47 aLi1[i].onmouseover=function(){ 48 clearInterval(timer); 49 $('#slide').stop(true); 50 iNow=$(this).index(); 51 iNow2=$(this).index(); 52 init(); 53 54 $('#slide').animate({'top':-150*$(this).index()}); 55 56 } 57 aLi1[i].onmouseout=function(){ 58 timer=setInterval(toRun,2000); 59 } 60 61 } 62 63 64 timer=setInterval(toRun,2000); 65 function toRun(){ 66 if(iNow==aLi.length-1){ 67 iNow=0; 68 69 $(aLi).eq(0).css({'position':'relative','top':'750px'}) 70 }else{ 71 iNow++; 72 } 73 iNow2++; 74 init(); 75 76 $('#slide').animate({'top':-150*iNow2},1000,function(){ 77 if(iNow==0){ 78 $(aLi).eq(0).css('position','static'); 79 $('#slide').css('top','0px'); 80 iNow2=0 81 } 82 }) 83 } 84 85 86 } 87 </script> 88 </head> 89 90 <body> 91 <div id="wrap"> 92 <div id="packet"> 93 <ul id="slide"> 94 <li><img src="images/1.jpg"/></li> 95 <li><img src="images/2.jpg"/></li> 96 <li><img src="images/3.jpg"/></li> 97 <li><img src="images/4.jpg"/></li> 98 <li><img src="images/5.jpg"/></li> 99 </ul> 100 </div> 101 </div> 102 </body> 103 </html>