Javascript achieves the image scroll effect on the left and right (Auto scroll, left and right buttons available) and javascript scroll

Javascript achieves the image scroll effect on the left and right (Auto scroll, left and right buttons available) and javascript scroll

The example in this article describes how javascript achieves image scrolling between the left and right sides. We will share this with you for your reference. The details are as follows:

Html code:

<! Doctype html> 
ScrollPic. js code:
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. currentStyle) {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 }}; // tumble image constructor // U I & UE Dept. mengjia // 080623 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; thi S. 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 is not the correct object. (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"; if (-[1,]) {this.listDiv01.style.css Float = "left"; this.listDiv02.style.css Float = "left";} else {this. listDiv01.style. styleFloat = "left"; this. listDiv02.style. styleFloat = "left";} sina. addEvent (this. scrollContDi V, "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. arrRig HtObj, "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 = doc Ument. 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 = "no." + (I + 1) + "page"; sina. addEvent (tempObj, "click", Function ("ScrollPic. childs ["+ this. ID + "]. pageTo ("+ I +") ") }}; if (this. autoPlay) {this. play () }}; this. le FtMouseDown = 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. spa Ce}; 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. frame width + 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 }}}};
Parameter description:
Var scrollPic = new ScrollPic (); // defines the variable and initializes the method.
ScrollContId // the ID of the rolling container
ArrLeftId // the ID of the left button
ArrRightId // the right button ID
FrameWidth // display box width
PageWidth // page flip width
Speed // The moving speed (unit: milliseconds, the smaller the speed)
Space // move the pixel each time (unit: px, the larger the value, the faster)
AutoPlay // automatic playback
AutoPlayTime // automatic playback interval (seconds)
Initialize () // Initialization
Click here to download the complete instance code.