js实现图片点击左右轮播

这个相当于一个小框架，拿来就可以用：
1. 功能：

如上图显示：点击左右两个button，可以实现图片向左右滚动，也可以设置在多少秒自己滚动。
2. 首先建立一个js文件，文件名为play.js（只要和HTML中的引入相同就可以了）：

var sina = {$: function（objName） {if （document.getElementById） {return eval（"document.getElementById（"" + objName + ""）"）} else {return eval（"document.all." + objName）}},isIE: navigator.appVersion.indexOf（"MSIE"） ！= -1 ? true : false,addEvent: function（l, i, I） {if （l.attachEvent） {l.attachEvent（"on" + i, I）} else {l.addEventListener（i, I, false）}},delEvent: function（l, i, I） {if （l.detachEvent） {l.detachEvent（"on" + i, I）} else {l.removeEventListener（i, I, false）}},readCookie: function（O） {var o = "",l = O + "=";if （document.cookie.length > 0） {var i = document.cookie.indexOf（l）;if （i ！= -1） {i += l.length;var I = document.cookie.indexOf（";", i）;if （I == -1） I = document.cookie.length;o = unescape（document.cookie.substring（i, I））}};return o},writeCookie: function（i, l, o, c） {var O = "",I = "";if （o ！= null） {O = new Date（（new Date）.getTime（） + o * 3600000）;O = "; expires=" + O.toGMTString（）};if （c ！= null） {I = ";domain=" + c};document.cookie = i + "=" + escape（l） + O + I},readStyle: function（I, l） {if （I.style[l]） {return I.style[l]} else if （I.rentStyle） {return I.currentStyle[l]} else if （document.defaultView && document.defaultView.getComputedStyle） {var i = document.defaultView.getComputedStyle（I, null）;return i.getPropertyValue（l）} else {return null}}};function ScrollPic（scrollContId, arrLeftId, arrRightId, dotListId） {this.scrollContId = scrollContId;this.arrLeftId = arrLeftId;this.arrRightId = arrRightId;this.dotListId = dotListId;this.dotClassName = "dotItem";this.dotOnClassName = "dotItemOn";this.dotObjArr = [];this.pageWidth = 0;this.frameWidth = 0;this.speed = 10;this.space = 10;this.pageIndex = 0;this.autoPlay = true;this.autoPlayTime = 5;var _autoTimeObj, _scrollTimeObj, _state = "ready";this.stripDiv = document.createElement（"DIV"）;this.listDiv01 = document.createElement（"DIV"）;this.listDiv02 = document.createElement（"DIV"）;if （！ScrollPic.childs） {ScrollPic.childs = []};this.ID = ScrollPic.childs.length;ScrollPic.childs.push（this）;this.initialize = function（） {if （！this.scrollContId） {throw new Error（"必须指定scrollContId."）;return};this.scrollContDiv = sina.$（this.scrollContId）;if （！this.scrollContDiv） {throw new Error（"scrollContId不是正确的对象.（scrollContId = "" + this.scrollContId + ""）"）;return};this.scrollContDiv.style.width = this.frameWidth + "px";this.scrollContDiv.style.overflow = "hidden";this.listDiv01.innerHTML = this.listDiv02.innerHTML = this.scrollContDiv.innerHTML;this.scrollContDiv.innerHTML = "";this.scrollContDiv.appendChild（this.stripDiv）;this.stripDiv.appendChild（this.listDiv01）;this.stripDiv.appendChild（this.listDiv02）;this.stripDiv.style.overflow = "hidden";this.stripDiv.style.zoom = "1";this.stripDiv.style.width = "32766px";this.listDiv01.style.cssFloat = "left";this.listDiv02.style.cssFloat = "left";sina.addEvent（this.scrollContDiv, "mouseover", Function（"ScrollPic.childs[" + this.ID + "].stop（）"））;sina.addEvent（this.scrollContDiv, "mouseout", Function（"ScrollPic.childs[" + this.ID + "].play（）"））;if （this.arrLeftId） {this.arrLeftObj = sina.$（this.arrLeftId）;if （this.arrLeftObj） {sina.addEvent（this.arrLeftObj, "mousedown", Function（"ScrollPic.childs[" + this.ID + "].rightMouseDown（）"））;sina.addEvent（this.arrLeftObj, "mouseup", Function（"ScrollPic.childs[" + this.ID + "].rightEnd（）"））;sina.addEvent（this.arrLeftObj, "mouseout", Function（"ScrollPic.childs[" + this.ID + "].rightEnd（）"））}};if （this.arrRightId） {this.arrRightObj = sina.$（this.arrRightId）;if （this.arrRightObj） {sina.addEvent（this.arrRightObj, "mousedown", Function（"ScrollPic.childs[" + this.ID + "].leftMouseDown（）"））;sina.addEvent（this.arrRightObj, "mouseup", Function（"ScrollPic.childs[" + this.ID + "].leftEnd（）"））;sina.addEvent（this.arrRightObj, "mouseout", Function（"ScrollPic.childs[" + this.ID + "].leftEnd（）"））}};if （this.dotListId） {this.dotListObj = sina.$（this.dotListId）;if （this.dotListObj） {var pages = Math.round（this.listDiv01.offsetWidth / this.frameWidth + 0.4）,i, tempObj;for （i = 0; i < pages; i++） {tempObj = document.createElement（"span"）;this.dotListObj.appendChild（tempObj）;this.dotObjArr.push（tempObj）;if （i == this.pageIndex） {tempObj.className = this.dotClassName} else {tempObj.className = this.dotOnClassName};tempObj.title = "第" + （i + 1） + "页";sina.addEvent（tempObj, "click", Function（"ScrollPic.childs[" + this.ID + "].pageTo（" + i + "）"））}}};if （this.autoPlay） {this.play（）}};this.leftMouseDown = function（） {if （_state ！= "ready"） {return};_state = "floating";_scrollTimeObj = setInterval（"ScrollPic.childs[" + this.ID + "].moveLeft（）", this.speed）};this.rightMouseDown = function（） {if （_state ！= "ready"） {return};_state = "floating";_scrollTimeObj = setInterval（"ScrollPic.childs[" + this.ID + "].moveRight（）", this.speed）};this.moveLeft = function（） {if （this.scrollContDiv.scrollLeft + this.space >= this.listDiv01.scrollWidth） {this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + this.space - this.listDiv01.scrollWidth} else {this.scrollContDiv.scrollLeft += this.space};this.accountPageIndex（）};this.moveRight = function（） {if （this.scrollContDiv.scrollLeft - this.space <= 0） {this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - this.space} else {this.scrollContDiv.scrollLeft -= this.space};this.accountPageIndex（）};this.leftEnd = function（） {if （_state ！= "floating"） {return};_state = "stoping";clearInterval（_scrollTimeObj）;var fill = this.pageWidth - this.scrollContDiv.scrollLeft % this.pageWidth;this.move（fill）};this.rightEnd = function（） {if （_state ！= "floating"） {return};_state = "stoping";clearInterval（_scrollTimeObj）;var fill = -this.scrollContDiv.scrollLeft % this.pageWidth;this.move（fill）};this.move = function（num, quick） {var thisMove = num / 5;if （！quick） {if （thisMove >this.space） {thisMove = this.space};if （thisMove < -this.space） {thisMove = -this.space}};if （Math.abs（thisMove） < 1 && thisMove ！= 0） {thisMove = thisMove >= 0 ? 1 : -1} else {thisMove = Math.round（thisMove）};var temp = this.scrollContDiv.scrollLeft + thisMove;if （thisMove > 0） {if （this.scrollContDiv.scrollLeft + thisMove >= this.listDiv01.scrollWidth） {this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + thisMove - this.listDiv01.scrollWidth} else {this.scrollContDiv.scrollLeft += thisMove}} else {if （this.scrollContDiv.scrollLeft - thisMove <= 0） {this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - thisMove} else {this.scrollContDiv.scrollLeft += thisMove}};num -= thisMove;if （Math.abs（num） == 0） {_state = "ready";if （this.autoPlay） {this.play（）};this.accountPageIndex（）;return} else {this.accountPageIndex（）;setTimeout（"ScrollPic.childs[" + this.ID + "].move（" + num + "," + quick + "）", this.speed）}};this.next = function（） {if （_state ！= "ready"） {return};_state = "stoping";this.move（this.pageWidth, true）};this.play = function（） {if （！this.autoPlay） {return};clearInterval（_autoTimeObj）;_autoTimeObj = setInterval（"ScrollPic.childs[" + this.ID + "].next（）", this.autoPlayTime * 1000）};this.stop = function（） {clearInterval（_autoTimeObj）};this.pageTo = function（num） {if （_state ！= "ready"） {return};_state = "stoping";var fill = num * this.frameWidth - this.scrollContDiv.scrollLeft;this.move（fill, true）};this.accountPageIndex = function（） {this.pageIndex = Math.round（this.scrollContDiv.scrollLeft / this.frameWidth）;if （this.pageIndex > Math.round（this.listDiv01.offsetWidth / this.frameWidth + 0.4） - 1） {this.pageIndex = 0};var i;for （i = 0; i < this.dotObjArr.length; i++） {if （i == this.pageIndex） {this.dotObjArr[i].className = this.dotClassName} else {this.dotObjArr[i].className = this.dotOnClassName}}}};

3. 建立一个HTML文件：

<！DOCTYPE html><html><head><meta charset="utf-8"><title>实现滚动轮播的效果</title><style type="text/css">.nav {width: 1100px;height: 160px;/*border: 1px solid red;*/margin-left: 140px;position: relative;cursor: pointer;margin-top: 15px;overflow: hidden;border: 1px solid red}.nav #nav-all {width: auto;height: 160px;position: absolute;left: -30px;}.nav .nav-i {width: 194px;height: 158px;background: #fff;border: 1px solid #d8d8d8;float: left;margin-left: 30px;}.nav .nav-img {text-align: center;padding-top: 50px;}.nav .nav-name {width: 192px;height: 30px;background: #f2f2f2;margin-top: 33px;line-height: 30px;}.nav .nav-name a {font-size: 16px;font-family: "微软雅黑";padding-left: 10px;cursor: pointer;}.nav .nav-name a:hover {color: #4a7abe;}#last {position: absolute;left: 0;top: 50px;}#next {position: absolute;right: 0;top: 50px;}.last-next {/*display: none;*/cursor: pointer;}</style></head><body><div class="nav" id="nav"><div id="nav-all"><div class="nav-i"><div class="nav-img"><img src="img/icon1.png" /></div><div class="nav-name"><a>BI系统1</a></div></div><div class="nav-i"><div class="nav-img"><img src="img/icon1.png" /></div><div class="nav-name"><a>BI系统2</a></div></div><div class="nav-i"><div class="nav-img"><img src="img/icon1.png" /></div><div class="nav-name"><a>BI系统3</a></div></div><div class="nav-i"><div class="nav-img"><img src="img/icon1.png" /></div><div class="nav-name"><a>BI系统4</a></div></div><div class="nav-i"><div class="nav-img"><img src="img/icon1.png" /></div><div class="nav-name"><a>BI系统5</a></div></div><div class="nav-i"><div class="nav-img"><img src="img/icon1.png" /></div><div class="nav-name"><a>BI系统6</a></div></div><div class="nav-i"><div class="nav-img"><img src="img/icon1.png" /></div><div class="nav-name"><a>BI系统7</a></div></div></div><a class="last-next" id="last"><img src="img/last.png" /></a><a class="last-next" id="next"><img src="img/next.png" /></a></div><script src="play.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">var scrollPic_02 = new ScrollPic（）;scrollPic_02.scrollContId = "nav-all";//存放所有轮播元素的divscrollPic_02.arrLeftId = "last"; //左箭头IDscrollPic_02.arrRightId = "next"; //右箭头IDscrollPic_02.frameWidth = 1102; //显示框宽sfdasdfakfl;jlkajka;d度scrollPic_02.pageWidth = 226; //翻页宽度scrollPic_02.speed = 10; //移动速度（毫秒，越小越快）scrollPic_02.space = 20; //每次移动像素（单位px，越大越快）scrollPic_02.autoPlay = true; //自动播放:true|falsescrollPic_02.autoPlayTime = 2; //自动播放间隔时间（秒）scrollPic_02.initialize（）; //初始化 //--><！]]></script></body></html>

其中：样式自己调试，最主要的是最下面的script，设置好这些就能达到效果了。
下次要写的轮播的话，只要改变样式就可以了，对于script中的一些数据进行改变就可以了。
以上所述就是本文的全部内容了，希望大家能够喜欢。