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>
时间： 2025-01-17 00:05:43