javascript image rotation functional inheritance_javascript skills

Let’s first look at how the JS was constructed for the animations of the past few days:

Copy the code The code is as follows:

var photo=function(){
var index=0,a,b,c,d;
return {
show:function(){},
auto:function(){ }
}
}
var aa=photo();
//Basically, return is used to return some methods.
///1: Execute auto if it cannot be initialized.
///2: During initialization, I cannot point this to aa.
//The above two questions will be very inconvenient.

1: I don’t want to let myself write here:

Copy code The code is as follows:

var aa=photo("id");
aa.auto()//One more sentence, very ugly.

The ideal situation is that I tell the program whether to play automatically when
var aa=photo("id").
2: If there are two animations on the same page.
For example:

Copy code The code is as follows:

var aa=photo ("id1");
aa.auto()
var bb=photo("id2");
bb.auto()

Then they all have user controls The A tag of animation, how to each be responsible for their own animation. Do not interfere with each other. (In fact, it involves the issue of private variables, and this points to it);

Statement: There are many ways to solve the above problems on the Internet. What follows is just what I figured out. So I’m here to share it with you, and the experts will laugh at it.
Yes, I solved this problem on the bus again. "Javascript Language Essence" Page 52 5.4 Functionalization
Let me take a look at the source code of this functional constructor:

//Bold indicates emphasis
//This method is "javascript language" Essence" on page 52 of 5.4 Functionalization.
var constructor = function (spec,my){
var that, other private instance variables;
my = my || {};
Add shared variables and functions to my
that = a new object
Add privileged method to that
return that;
}

Look at the following method:

Copy code The code is as follows:

var photo = function(spec){
var _this={},index,a,c ,d;
//Here you can initialize the user-controlled a tag
//For example, this foreign
a.onmouseover=function(){
_this.go();//Can be called
}
_this.show=function(){};
_this.auto=function(){};
_this.go=function(){};
// You can directly Call the method just declared
_this.auto()//You can directly call
return _this;
}

var bb=photo({index:1;});
var aa=photo({index:2});
//The above creates two different animations of bb aa, which will not affect each other.
// If I have a problem with the functional understanding of the essence of the JavaScript language. Please give me some advice...

This animation is perfect in the end. But there are too many private variables. If a default value can be set, the user can optionally pass it in. It will be better
so you can add the following function: (this is used by many people)

Copy code The code is as follows:

var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
// Everyone knows what Extend is used for.

Finally post the source code of the image rotation I wrote today:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>javascript image rotation</title> <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 style="width:610px;height:210px;overflow:hidden; margin:10px; border:1px solid #000;"> <div id="div"> <ul id="photo" style="margin-top:0px;"> <li><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/demoimg/201005/r_img1.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="javascript image rotation functional inheritance_javascript skills" ></li> <li><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/demoimg/201005/r_img2.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="javascript image rotation functional inheritance_javascript skills" ></li> <li><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/demoimg/201005/r_img3.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="javascript image rotation functional inheritance_javascript skills" ></li> <li><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/demoimg/201005/r_img4.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="javascript image rotation functional inheritance_javascript skills" ></li> <li><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/demoimg/201005/r_img5.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="javascript image rotation functional inheritance_javascript skills" ></li> </ul> </div> <div class="number-warp" id="number"> <a href="#" class="sel">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div> </div> <div style="width:610px;height:210px;overflow:hidden; margin:10px; border:1px solid #000;"> <div id="div"> <ul id="photo2" style="margin-top:0px;"> <li><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/demoimg/201005/r_img1.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="javascript image rotation functional inheritance_javascript skills" ></li> <li><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/demoimg/201005/r_img2.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="javascript image rotation functional inheritance_javascript skills" ></li> <li><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/demoimg/201005/r_img3.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="javascript image rotation functional inheritance_javascript skills" ></li> <li><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/demoimg/201005/r_img4.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="javascript image rotation functional inheritance_javascript skills" ></li> </ul> </div> <div class="number-warp" id="number2"> <a href="#" class="sel">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> </div> </div>