1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 body,div,ul,li{
8 margin:0;padding: 0;
9 }
10 ul{
11 list-style-type:none;
12 }
13 body{
14 background:#000;
15 text-align:center;
16 font:12px/20px Arial;
17 }
18 #box{
19 position:relative;
20 width:492px;
21 height:172px;
22 background:#fff;
23 border-radius:5px;
24 border:8px solid #fff;
25 margin:10px auto;
26 cursor:pointer;
27 }
28 #box .list{
29 position:relative;
30 width:490px;
31 height:170px;
32 overflow:hidden;
33 }
34 #box .list ul{
35 position:absolute;
36 top:0;left:0;
37 }
38 #box .list li{
39 width:490px;
40 height:170px;
41 overflow:hidden;
42 }
43 #box .count{
44 position:absolute;
45 right:0;
46 bottom:5px;
47 }
48 #box .count li{
49 color:#fff;
50 float:left;
51 width:20px;
52 height:20px;
53 cursor:pointer;
54 margin-right:5px;
55 overflow:hidden;
56 background:#F90;
57 opacity:0.7;
58 filter:alpha(opacity=70);
59 border-radius:20px;
60 }
61 #box .count li .current{
62 color:#fff;
63 opacity:1;
64 filter:alpha(opacity=100);font-weight:700;background:#f60;
65 }
66 #tmp{
67 width:100px;
68 height:100px;
69 background:red;
70 position:absolute;
71 }
72
73 </style>
74 <script>
75 //获取ID
76 var $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id};
77
78 //获取tagName
79 var $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName)};
80
81 //自动播放对象
82 var AutoPlay = function (id) {this.initialize(id)};
83
84 AutoPlay.prototype = {
85 initialize: function (id)
86 {
87 var oThis = this;
88 this.oBox = $(id);
89 this.oUl = $$("ul", this.oBox)[0];
90 this.aImg = $$("img", this.oBox);
91 this.timer = null;
92 this.autoTimer = null;
93 this.iNow = 0;
94 this.creatBtn();
95 this.aBtn = $$("li", this.oCount);
96 this.toggle();
97 this.autoTimer = setInterval(function ()
98 {
99 oThis.next();
100 }, 3000);
101 this.oBox.onmouseover = function ()
102 {
103 clearInterval(oThis.autoTimer)
104 };
105 this.oBox.onmouseout = function ()
106 {
107 oThis.autoTimer = setInterval(function ()
108 {
109 oThis.next()
110 }, 3000)
111 };
112 for (var i = 0; i < this.aBtn.length; i++)
113 {
114 this.aBtn[i].index = i;
115 this.aBtn[i].onmouseover = function ()
116 {
117 oThis.iNow = this.index;
118 oThis.toggle()
119 }
120 }
121 },
122 creatBtn: function ()
123 {
124 this.oCount = document.createElement("ul");
125 this.oFrag = document.createDocumentFragment();
126 this.oCount.className = "count";
127 for (var i = 0; i < this.aImg.length; i++)
128 {
129 var oLi = document.createElement("li");
130 oLi.innerHTML = i + 1;
131 this.oFrag.appendChild(oLi)
132 }
133 this.oCount.appendChild(this.oFrag);
134 this.oBox.appendChild(this.oCount)
135 },
136 toggle: function ()
137 {
138 for (var i = 0; i < this.aBtn.length; i++)
139 this.aBtn[i].className = "";
140 this.aBtn[this.iNow].className = "current";
141 this.doMove(-(this.iNow * this.aImg[0].offsetHeight))
142 },
143 next: function ()
144 {
145 this.iNow++;
146 this.iNow == this.aBtn.length && (this.iNow = 0);
147 this.toggle()
148 },
149 doMove: function (iTarget)
150 {
151 var oThis = this;
152 clearInterval(oThis.timer);
153 oThis.timer = setInterval(function ()
154 {
155 var iSpeed = (iTarget - oThis.oUl.offsetTop) / 5;
156 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
157 oThis.oUl.offsetTop == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.top = oThis.oUl.offsetTop + iSpeed + "px")
158 }, 30)
159 }
160 };
161 window.onload = function ()
162 {
163 new AutoPlay("box");
164 };
165 </script>
166 </head>
167 <body>
168 <div id="box">
169 <div class="list">
170 <ul>
171 <li><img src="image/01.jpg" width="490" height="170" /></li>
172 <li><img src="image/02.jpg" width="490" height="170" /></li>
173 <li><img src="image/03.jpg" width="490" height="170" /></li>
174 <li><img src="image/04.jpg" width="490" height="170" /></li>
175 <li><img src="image/05.jpg" width="490" height="170" /></li>
176 </ul>
177 </div>
178 </div>
179 </body>
180 </html>
时间： 2024-08-04 03:37:15