实现图片点击左右轮播

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

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.dotClassName140                     } else {141                         tempObj.className = this.dotOnClassName142                     };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             return155         };156         _state = "floating";157         _scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveLeft()", this.speed)158     };159     this.rightMouseDown = function() {160         if (_state != "ready") {161             return162         };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.scrollWidth169         } else {170             this.scrollContDiv.scrollLeft += this.space171         };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.space177         } else {178             this.scrollContDiv.scrollLeft -= this.space179         };180         this.accountPageIndex()181     };182     this.leftEnd = function() {183         if (_state != "floating") {184             return185         };186         _state = "stoping";187         clearInterval(_scrollTimeObj);188         var fill = this.pageWidth - this.scrollContDiv.scrollLeft % th