jq 轮播图 上下自动滚动 

  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{width:470px;height:150px;margin:40px auto;   }
 10 #packet{width:470px;height:150px;overflow:hidden;position:relative}
 11 #packet ul{ position:absolute;top:0;left:0}
 12 #slide li{ width:470px;height:150px;position:relative;top:0;left:0 }
 13 #packet ol{position:absolute;right:5px;bottom:5px;}
 14 #packet ol li{width: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>

 

posted @ 2014-12-17 15:03  miyaye  阅读(925)  评论(0)    收藏  举报