首页 > 代码库 > js实现图片轮番

js实现图片轮番

2024-09-09 00:18:11   223人阅读

  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=http://www.mamicode.com/"image/01.jpg" width="490" height="170" /></li>
172             <li><img src=http://www.mamicode.com/"image/02.jpg" width="490" height="170" /></li>
173             <li><img src=http://www.mamicode.com/"image/03.jpg" width="490" height="170" /></li>
174             <li><img src=http://www.mamicode.com/"image/04.jpg" width="490" height="170" /></li>
175             <li><img src=http://www.mamicode.com/"image/05.jpg" width="490" height="170" /></li>
176         </ul>
177     </div>
178 </div>
179 </body>
180 </html>

 

js实现图片轮番


联系
我们