Home > Developer > JavaScript
The example of this article tells the JavaScript implementation of the image scrolling effect. Share to everyone for your reference, specific 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.index Of ("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.detacheve NT ("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 = ";d omain=" + C}; Document.cookie = i + "=" + Escape (L) + O + i}, readstyle:function (i, L) {if (i.style[l)) {return i.st YLE[L]} else if (I.currentstyle) {return i.currentstyle[l]} else if (Document.defaultview && docu
Ment.defaultView.getComputedStyle) {var i = Document.defaultView.getComputedStyle (i, NULL);
Return I.getpropertyvalue (L)} or else {return null}}}; Scrolling picture Constructors//ui&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;
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 ("must specify 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.cssFloat = "left";
This.listDiv02.style.cssFloat = "Left";
}else{this.listDiv01.style.styleFloat = "Left";
This.listDiv02.style.styleFloat = "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 + "].rig")
Htmousedown ())); 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 + "].L")
Eftmousedown ()));
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.CLASSN
ame = This.dotonclassname};
Tempobj.title = "First" + (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.scrollcon
Tdiv.scrollleft + = This.space};
This.accountpageindex ()}; This.moveright = function () {if (this.scrollcontdiv.scrollleft-this.space <= 0) {This.scrollContDiv.scro Llleft = This.listDiv01.scrollWidth + this.scrollcontdiv.scrollleft-this.space} else {THIS.SCROLLCONTDIV.SCR
Ollleft-= 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 {th
Ismove = 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 {T His.scrollContDiv.scrollLeft + = Thismove}} else {if (this.scrollcontdiv.scrollleft-thismove <= 0) {this.scrollContDiv.scrollLeft = This.listDiv01.scrollWidth + this.scrollcontdiv.scrollleft-thismove} el
Se {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 = th
Is.dotclassname} else {this.dotobjarr[i].classname = This.dotonclassname}}}};
Parameter description:
var scrollpic = new Scrollpic (); Define variables, and initialize methods
ID of the Scrollcontid//scrolling container
Arrleftid//Left button ID
Arrrightid//Right button ID
Framewidth//Display box width
PageWidth//Page width
Speed//move speed (in milliseconds, smaller, faster)
Space//per move pixel (unit px, the larger the faster)
AutoPlay//Auto Play
Autoplaytime//Auto Play interval (sec)
Initialize ()//initialization
Full instance code click here to download the site.
More readers interested in JavaScript-related content can view the site topics: "JavaScript switching effects and tips summary", "JavaScript Search Algorithm Skills Summary", "JavaScript animation effects and tips summary", " JavaScript error and debugging skills Summary, JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and skills summary and JavaScript mathematical calculation usage Summary
I hope this article will help you with JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
