实现图片点击左右轮播

  1 var sina = {
  2     $: function(objName) {
  3         if (document.getElementById) {
  4             return eval(‘document.getElementById("‘ + objName + ‘")‘)
  5         } else {
  6             return eval(‘document.all.‘ + objName)
  7         }
  8     },
  9     isIE: navigator.appVersion.indexOf("MSIE") != -1 ? true : false,
 10     addEvent: function(l, i, I) {
 11         if (l.attachEvent) {
 12             l.attachEvent("on" + i, I)
 13         } else {
 14             l.addEventListener(i, I, false)
 15         }
 16     },
 17     delEvent: function(l, i, I) {
 18         if (l.detachEvent) {
 19             l.detachEvent("on" + i, I)
 20         } else {
 21             l.removeEventListener(i, I, false)
 22         }
 23     },
 24     readCookie: function(O) {
 25         var o = "",
 26             l = O + "=";
 27         if (document.cookie.length > 0) {
 28             var i = document.cookie.indexOf(l);
 29             if (i != -1) {
 30                 i += l.length;
 31                 var I = document.cookie.indexOf(";", i);
 32                 if (I == -1) I = document.cookie.length;
 33                 o = unescape(document.cookie.substring(i, I))
 34             }
 35         };
 36         return o
 37     },
 38     writeCookie: function(i, l, o, c) {
 39         var O = "",
 40             I = "";
 41         if (o != null) {
 42             O = new Date((new Date).getTime() + o * 3600000);
 43             O = "; expires=" + O.toGMTString()
 44         };
 45         if (c != null) {
 46             I = ";domain=" + c
 47         };
 48         document.cookie = i + "=" + escape(l) + O + I
 49     },
 50     readStyle: function(I, l) {
 51         if (I.style[l]) {
 52             return I.style[l]
 53         } else if (I.rentStyle) {
 54             return I.currentStyle[l]
 55         } else if (document.defaultView && document.defaultView.getComputedStyle) {
 56             var i = document.defaultView.getComputedStyle(I, null);
 57             return i.getPropertyValue(l)
 58         } else {
 59             return null
 60         }
 61     }
 62 };
 63 
 64 function ScrollPic(scrollContId, arrLeftId, arrRightId, dotListId) {
 65     this.scrollContId = scrollContId;
 66     this.arrLeftId = arrLeftId;
 67     this.arrRightId = arrRightId;
 68     this.dotListId = dotListId;
 69     this.dotClassName = "dotItem";
 70     this.dotOnClassName = "dotItemOn";
 71     this.dotObjArr = [];
 72     this.pageWidth = 0;
 73     this.frameWidth = 0;
 74     this.speed = 10;
 75     this.space = 10;
 76     this.pageIndex = 0;
 77     this.autoPlay = true;
 78     this.autoPlayTime = 5;
 79     var _autoTimeObj, _scrollTimeObj, _state = "ready";
 80     this.stripDiv = document.createElement("DIV");
 81     this.listDiv01 = document.createElement("DIV");
 82     this.listDiv02 = document.createElement("DIV");
 83     if (!ScrollPic.childs) {
 84         ScrollPic.childs = []
 85     };
 86     this.ID = ScrollPic.childs.length;
 87     ScrollPic.childs.push(this);
 88     this.initialize = function() {
 89         if (!this.scrollContId) {
 90             throw new Error("必须指定scrollContId.");
 91             return
 92         };
 93         this.scrollContDiv = sina.$(this.scrollContId);
 94         if (!this.scrollContDiv) {
 95             throw new Error("scrollContId不是正确的对象.(scrollContId = \"" + this.scrollContId + "\")");
 96             return
 97         };
 98 
 99         this.scrollContDiv.style.width = this.frameWidth + "px";
100         this.scrollContDiv.style.overflow = "hidden";
101         this.listDiv01.innerHTML = this.listDiv02.innerHTML = this.scrollContDiv.innerHTML;
102         this.scrollContDiv.innerHTML = "";
103         this.scrollContDiv.appendChild(this.stripDiv);
104         this.stripDiv.appendChild(this.listDiv01);
105         this.stripDiv.appendChild(this.listDiv02);
106         this.stripDiv.style.overflow = "hidden";
107         this.stripDiv.style.zoom = "1";
108         this.stripDiv.style.width = "32766px";
109         this.listDiv01.style.cssFloat = "left";
110         this.listDiv02.style.cssFloat = "left";
111         sina.addEvent(this.scrollContDiv, "mouseover", Function("ScrollPic.childs[" + this.ID + "].stop()"));
112         sina.addEvent(this.scrollContDiv, "mouseout", Function("ScrollPic.childs[" + this.ID + "].play()"));
113         if (this.arrLeftId) {
114             this.arrLeftObj = sina.$(this.arrLeftId);
115             if (this.arrLeftObj) {
116                 sina.addEvent(this.arrLeftObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].rightMouseDown()"));
117                 sina.addEvent(this.arrLeftObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"));
118                 sina.addEvent(this.arrLeftObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"))
119             }
120         };
121         if (this.arrRightId) {
122             this.arrRightObj = sina.$(this.arrRightId);
123             if (this.arrRightObj) {
124                 sina.addEvent(this.arrRightObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].leftMouseDown()"));
125                 sina.addEvent(this.arrRightObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"));
126                 sina.addEvent(this.arrRightObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"))
127             }
128         };
129         if (this.dotListId) {
130             this.dotListObj = sina.$(this.dotListId);
131             if (this.dotListObj) {
132                 var pages = Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4),
133                     i, tempObj;
134                 for (i = 0; i < pages; i++) {
135                     tempObj = document.createElement("span");
136                     this.dotListObj.appendChild(tempObj);
137                     this.dotObjArr.push(tempObj);
138                     if (i == this.pageIndex) {
139                         tempObj.className = this.dotClassName
140                     } else {
141                         tempObj.className = this.dotOnClassName
142                     };
143                     tempObj.title = "第" + (i + 1) + "页";
144                     sina.addEvent(tempObj, "click", Function("ScrollPic.childs[" + this.ID + "].pageTo(" + i + ")"))
145                 }
146             }
147         };
148         if (this.autoPlay) {
149             this.play()
150         }
151     };
152     this.leftMouseDown = function() {
153         if (_state != "ready") {
154             return
155         };
156         _state = "floating";
157         _scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveLeft()", this.speed)
158     };
159     this.rightMouseDown = function() {
160         if (_state != "ready") {
161             return
162         };
163         _state = "floating";
164         _scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveRight()", this.speed)
165     };
166     this.moveLeft = function() {
167         if (this.scrollContDiv.scrollLeft + this.space >= this.listDiv01.scrollWidth) {
168             this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + this.space - this.listDiv01.scrollWidth
169         } else {
170             this.scrollContDiv.scrollLeft += this.space
171         };
172         this.accountPageIndex()
173     };
174     this.moveRight = function() {
175         if (this.scrollContDiv.scrollLeft - this.space <= 0) {
176             this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - this.space
177         } else {
178             this.scrollContDiv.scrollLeft -= this.space
179         };
180         this.accountPageIndex()
181     };
182     this.leftEnd = function() {
183         if (_state != "floating") {
184             return
185         };
186         _state = "stoping";
187         clearInterval(_scrollTimeObj);
188         var fill = this.pageWidth - this.scrollContDiv.scrollLeft % this.pageWidth;
189         this.move(fill)
190     };
191     this.rightEnd = function() {
192         if (_state != "floating") {
193             return
194         };
195         _state = "stoping";
196         clearInterval(_scrollTimeObj);
197         var fill = -this.scrollContDiv.scrollLeft % this.pageWidth;
198         this.move(fill)
199     };
200     this.move = function(num, quick) {
201         var thisMove = num / 5;
202         if (!quick) {
203             if (thisMove >
204                 this.space) {
205                 thisMove = this.space
206             };
207             if (thisMove < -this.space) {
208                 thisMove = -this.space
209             }
210         };
211         if (Math.abs(thisMove) < 1 && thisMove != 0) {
212             thisMove = thisMove >= 0 ? 1 : -1
213         } else {
214             thisMove = Math.round(thisMove)
215         };
216         var temp = this.scrollContDiv.scrollLeft + thisMove;
217         if (thisMove > 0) {
218             if (this.scrollContDiv.scrollLeft + thisMove >= this.listDiv01.scrollWidth) {
219                 this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + thisMove - this.listDiv01.scrollWidth
220             } else {
221                 this.scrollContDiv.scrollLeft += thisMove
222             }
223         } else {
224             if (this.scrollContDiv.scrollLeft - thisMove <= 0) {
225                 this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - thisMove
226             } else {
227                 this.scrollContDiv.scrollLeft += thisMove
228             }
229         };
230         num -= thisMove;
231         if (Math.abs(num) == 0) {
232             _state = "ready";
233             if (this.autoPlay) {
234                 this.play()
235             };
236             this.accountPageIndex();
237             return
238         } else {
239             this.accountPageIndex();
240             setTimeout("ScrollPic.childs[" + this.ID + "].move(" + num + "," + quick + ")", this.speed)
241         }
242     };
243     this.next = function() {
244         if (_state != "ready") {
245             return
246         };
247         _state = "stoping";
248         this.move(this.pageWidth, true)
249     };
250     this.play = function() {
251         if (!this.autoPlay) {
252             return
253         };
254         clearInterval(_autoTimeObj);
255         _autoTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].next()", this.autoPlayTime * 1000)
256     };
257     this.stop = function() {
258         clearInterval(_autoTimeObj)
259     };
260     this.pageTo = function(num) {
261         if (_state != "ready") {
262             return
263         };
264         _state = "stoping";
265         var fill = num * this.frameWidth - this.scrollContDiv.scrollLeft;
266         this.move(fill, true)
267     };
268     this.accountPageIndex = function() {
269         this.pageIndex = Math.round(this.scrollContDiv.scrollLeft / this.frameWidth);
270         if (this.pageIndex > Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4) - 1) {
271             this.pageIndex = 0
272         };
273         var i;
274         for (i = 0; i < this.dotObjArr.length; i++) {
275             if (i == this.pageIndex) {
276                 this.dotObjArr[i].className = this.dotClassName
277             } else {
278                 this.dotObjArr[i].className = this.dotOnClassName
279             }
280         }
281     }
282 };

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="utf-8">
  6         <title>实现滚动轮播的效果</title>
  7         <style type="text/css">
  8             .nav {
  9                 width: 1100px;
 10                 height: 160px;
 11                 /*border: 1px solid red;*/
 12                 margin-left: 140px;
 13                 position: relative;
 14                 cursor: pointer;
 15                 margin-top: 15px;
 16                 overflow: hidden;
 17                 border: 1px solid red
 18             }
 19             .nav #nav-all {
 20                 width: auto;
 21                 height: 160px;
 22                 position: absolute;
 23                 left: -30px;
 24             }
 25             .nav .nav-i {
 26                 width: 194px;
 27                 height: 158px;
 28                 background: #fff;
 29                 border: 1px solid #d8d8d8;
 30                 float: left;
 31                 margin-left: 30px;
 32             }
 33             .nav .nav-img {
 34                 text-align: center;
 35                 padding-top: 50px;
 36             }
 37             .nav .nav-name {
 38                 width: 192px;
 39                 height: 30px;
 40                 background: #f2f2f2;
 41                 margin-top: 33px;
 42                 line-height: 30px;
 43             }
 44             .nav .nav-name a {
 45                 font-size: 16px;
 46                 font-family: ‘微软雅黑‘;
 47                 padding-left: 10px;
 48                 cursor: pointer;
 49             }
 50             .nav .nav-name a:hover {
 51                 color: #4a7abe;
 52             }
 53             #last {
 54                 position: absolute;
 55                 left: 0;
 56                 top: 50px;
 57             }
 58             #next {
 59                 position: absolute;
 60                 right: 0;
 61                 top: 50px;
 62             }
 63             .last-next {
 64                 /*display: none;*/
 65                 
 66                 cursor: pointer;
 67             }
 68         </style>
 69     </head>
 70 
 71     <body>
 72         <div class="nav" id="nav">
 73             <div id="nav-all">
 74                 <div class="nav-i">
 75                     <div class="nav-img">
 76                         <img src="img/icon1.png" />
 77                     </div>
 78                     <div class="nav-name"><a>BI系统1</a>
 79                     </div>
 80                 </div>
 81                 <div class="nav-i">
 82                     <div class="nav-img">
 83                         <img src="img/icon1.png" />
 84                     </div>
 85                     <div class="nav-name"><a>BI系统2</a>
 86                     </div>
 87                 </div>
 88                 <div class="nav-i">
 89                     <div class="nav-img">
 90                         <img src="img/icon1.png" />
 91                     </div>
 92                     <div class="nav-name"><a>BI系统3</a>
 93                     </div>
 94                 </div>
 95                 <div class="nav-i">
 96                     <div class="nav-img">
 97                         <img src="img/icon1.png" />
 98                     </div>
 99                     <div class="nav-name"><a>BI系统4</a>
100                     </div>
101                 </div>
102                 <div class="nav-i">
103                     <div class="nav-img">
104                         <img src="img/icon1.png" />
105                     </div>
106                     <div class="nav-name"><a>BI系统5</a>
107                     </div>
108                 </div>
109                 <div class="nav-i">
110                     <div class="nav-img">
111                         <img src="img/icon1.png" />
112                     </div>
113                     <div class="nav-name"><a>BI系统6</a>
114                     </div>
115                 </div>
116                 <div class="nav-i">
117                     <div class="nav-img">
118                         <img src="img/icon1.png" />
119                     </div>
120                     <div class="nav-name"><a>BI系统7</a>
121                     </div>
122                 </div>
123             </div>
124             <a class="last-next" id="last">
125                 <img src="img/last.png" />
126             </a>
127             <a class="last-next" id="next">
128                 <img src="img/next.png" />
129             </a>
130         </div>
131         <script src="play.js" type="text/javascript" charset="utf-8"></script>
132 
133         <script type="text/javascript">
134             var scrollPic_02 = new ScrollPic();
135             scrollPic_02.scrollContId = "nav-all";//存放所有轮播元素的div
136             scrollPic_02.arrLeftId = "last"; //左箭头ID
137             scrollPic_02.arrRightId = "next"; //右箭头ID
138             scrollPic_02.frameWidth = 1102; //显示框宽       sfdasdfakfl;jlkajka;d度
139             scrollPic_02.pageWidth = 226; //翻页宽度
140             scrollPic_02.speed = 10; //移动速度(毫秒，越小越快)
141             scrollPic_02.space = 20; //每次移动像素(单位px，越大越快)
142             scrollPic_02.autoPlay = true; //自动播放:true|false
143             scrollPic_02.autoPlayTime = 2; //自动播放间隔时间(秒)
144             scrollPic_02.initialize(); //初始化
145              //--><!]]>
146         </script>
147     </body>
148 
149 </html>