First look at the next few days of animation is how to construct JS:
Copy Code code as follows:
var photo=function () {
var index=0,a,b,c,d;
return {
Show:function () {},
Auto:function () {}
}
}
var aa=photo ();
It basically returns some methods with return.
1: Auto will be executed on failure of initialization.
2: At the time of initialization, I have no way to point this to AA.
The above two questions, will be very inconvenient.
1: I do not want to let myself go to this foreign write:
Copy Code code as follows:
var aa=photo ("id");
Aa.auto ()//More than a word, very not good-looking.
The ideal state is that I
var aa=photo ("id") tells the program whether to play automatically.
2: If there are two animations on the same page.
Like what:
Copy Code code as follows:
var Aa=photo ("Id1");
Aa.auto ()
var Bb=photo ("Id2");
Bb.auto ()
Then they all have user control animation of a tag, how to be responsible for their own animation. Do not interfere with each other. (In fact, he involves the problem of private variables, and this point);
Affirmation: There are many ways to solve the above problems on the Internet. It's just that I figured it out. So to share with you, Master laughed at.
Yes, it's on the bus again, I solved the problem. The essence of JavaScript Language 52nd page 5.4 function
Let me take a look at the source code for this functional constructor:
Bold to emphasize
This method is on the 52nd page of the JavaScript language pristine 5.4 functional.
var constructor = function (spec,my) {
var that, other private instance variables;
my = My | | {};
Add shared variables and functions to my
that = a new object
The privileged method to add to that
return to that;
}
Look at the following method:
Copy Code code as follows:
var photo = function (spec) {
var _this={},index,a,c,d;
Here you can initialize user-controlled a tag
Like this ocean.
A.onmouseover=function () {
_this.go ()//Can call OH
}
_this.show=function () {};
_this.auto=function () {};
_this.go=function () {};
Here you can directly invoke the method that you just declared.
_this.auto ()//can be directly invoked
return _this;
}
var Bb=photo ({index:1;});
var Aa=photo ({index:2});
The above created a BB aa two different animations that won't affect each other oh.
If I have a problem with the functional understanding of the JavaScript language pristine. Please also advise ...
Finally, the animation is perfect. But there are too many private variables. If you can set a default value, you can use the user's selective pass in. It'll be better.
So you can add the following function: (This is used by a lot of people)
Copy Code code as follows:
var Extend = function (destination, source) {
For (Var property in source) {
Destination[property] = Source[property];
}
return destination;
}
Seeing Extend everyone knows what he's doing.
Finally posted today I wrote this picture of the rotation of the source code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>javascript picture rotation </title> </pead> <body> <style type=" Text/css " > body,ul,li{margin:0; padding:0;} #div {Width:610px;height:210px;overflow:hidden;} #photo li{height:210px overflow:hidden background: #fff URL (001.gif) no-repeat Center Center; #photo2 li{height:210px overflow:hidden background: #fff URL (001.gif) no-repeat Center Center; . number-warp{position:absolute;margin-top:-50px;width:600px; text-align:right;} . number-warp a{border:1px solid #CCC; width:30px; height:30px; display:inline-block; height:100%;margin-left:5px; Text-align:center; Text-decoration:none;} . Sel{background: #CCC;} </style> <div > <div id= "div" > <ul id= "Photo" > <li></li> <li></li> <li></li> <li></li> <li></li> </ul& Gt </div> <div class= "Number-warp" id= "Number" > 1 2 3 4 5 </div> </div> <div > <di V id= "div" > <ul id= "Photo2" > <li></li> <li></li> <li></li> <li>&l t;/li> </ul> </div> <div class= "Number-warp" id= "Number2" > 1 2 3 4 </div> </div> <script type= "Text/javascript" > var Extend = function (destination, source) {for (var property in source) {des Tination[property] = Source[property]; return destination; The Var photo=function (spec) {var $=function (id) {return document.getElementById (ID); }, _this={}, A=document.getelementbyid (spec["number"). getElementsByTagName ("a"), my={$: "", change:-210, d:50, num : 3, Au:true, index:0,x:null,v:null}, Tween=function (t,b,c,d) {return-c* (t/=d) * (t-2) +b; }, Autoo=function () {_this.show (my.index+1 > My.num? 0:my.index+1); }; Extend (MY,SPEC)//better with him for (Var i=0; i<a.length; i++) {a[i].onmouseover= (function (i) {return function () {_this.go (i )}) (i); a[i].onmouseout= (function (i) {return function () {_this.auto ()}}) (i); }; _this.show=function (n) {if (typeof my.x = = "Number") {_this.stop (); var t=0,n=n,b=parseint (my.$.style.margintop), C=n*my.change-b, O=function () {t++; if (t==my.d+1) {_this.stop (); }else{My.$.style.margintop=tween (T,B,C,MY.D) + "px"; My.x=settimeout (o,10); }} a[my.index].classname= ""; A[n].classname= "SEL"; My.index=n; O (); }; _this.stop=function () {cleartimeout (my.x); my.x=null; }; _this.auto=function () {_this=this; My.v=setinterval (autoo,3000); }; _this.go=function (n) {clearinterval (MY.V); This.show (n); }; if (my.au) {_this.auto ();}; return _this; var Bb=photo ({$:d Ocument.getelementbyid ("Photo2"), Number: "Number2", change:-210, Num:3}); var Aa=photo ({$:d Ocument.getelementbyid("Photo"), change:-210, Number: "Number", num:4}); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
