实现图片点击左右轮播
这个 相当于一个小框架，拿来就可以用：
1. 功能：
如上图显示： 点击左右两个button，可以实现图片向左右滚动，也可以设置在多少秒自己滚动。
2. 首先建立一个js文件，文件名为play.js（只要和HTML中的引入相同就可以了）：
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 };
3. 建立一个HTML文件：
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>
其中：样式自己调试，最主要的是最下面的script，设置好这些就能达到效果了。
下次要写的轮播的话，只要改变样式就可以了，对于script中的一些数据进行改变就可以了。
