Js achieves image rotation by clicking left and right, and js image rotation by left and right

Js achieves image rotation by clicking left and right, and js image rotation by left and right

This is equivalent to a small frame, which can be used:

1. functions:

For example, if two buttons are clicked, the image will scroll to the left and right sides, or you can set the number of seconds to scroll by yourself.

2. Create a js file named play. js (as long as it is the same as the introduction in 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. using Style) {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; va R _ 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"; this.listDiv01.style.css Float = "left"; this.listDiv02.style.css Float = "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, "mou Seout ", 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. arrRightO Bj, "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 = "no." + (I + 1) + "page"; 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. spac E}; 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 }}}};

3. Create an HTML file:

<! DOCTYPE html> 
Among them: style debugging, the most important is the bottom script, set these to achieve the effect.
For the carousel to be written next time, you only need to change the style and change some data in the script.
The above is all the content of this article. I hope you will like it.