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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.