Object-oriented writing surface carousel FIG.

 

***** used in motion in front of the package

OOA: Carousel Figure: picture switch, click the button switches, left and right buttons, a top left, bottom right a
　　　　layout

　　　　JS
　　　　　　1. Select the element, set the default indexes 0
　　　　　　2. Binding Events
　　　　　　3. Calculate the index
　　　　　　4. The image switching Index

OOD: high cohesion, low coupling
　　　　function Banner () {
　　　　　　1. Select the element, set the default indexes 0
　　　　　　 2. performs binding event function
　　　　this.addEvent ();
　　　　　　　　}
　　　　Banner.prototype.addEvent = function () {
　　　　 definition binding function event
　　　　triggers the event
　　　　　　 3. perform calculating an index function
　　　　this.changeIndex ()
　　　　}
　　　　Banner.prototype.changeIndex = function () {
　　　　 definition of calculating an index function
　　　　 .....
　　　　　　4. handover function performs image
　　　　this.abc ( )
　　　　}
　　　　Banner.prototype.abc = function () {
　　　　 defined switching picture
　　　　}

　　

OOP:
　　function Banner(){
1.选择元素,设定默认索引0
　　　　this.left = document.querySelector(".left");
　　　　this.right = document.querySelector(".right");
　　　　this.img = document.querySelectorAll(".imgbox a");

　　　　this.index = 0;

　　　　=. 1 this.I;
 2. performs binding event function
　　　　this.addEvent ();
　　　　}
　　Banner.prototype.addEvent = function () {
　　　　var = that the this;
　　 define the binding event function
　　　　this.left.onclick = function () {
　　 triggering the event
 3. perform calculating an index function
　　　　that.changeIndexL ()
　　}
　　　　this.right.onclick = function () {
　　 triggering the event
 3. perform calculating an index function
　　　　that.changeIndexR ()
　　}
}
Banner.prototype.changeIndexL = function () {
　　 defined function calculating an index
　　IF (this.index == 0) {
　　this.index-this.img.length. 1 =
　　} {the else
　　this.index--;
　　}
// 4. perform image switching function
　　this .abc (. 1)
　　}
= Function Banner.prototype.changeIndexR () {
// definition of the function of calculating an index
　　　　IF (== this.img.length-this.index. 1) {
　　　　　　this.index = 0
　　　　　　} {the else
　　　　　　this.index ++
　　　　}
// 4. executed function of switching pictures
　　　　this.abc (-1)
　　　　}
　　Banner.prototype.abc = function (D) {
// definition of the function of switching images

@ effect. 1:
　　// for (var I = 0; I <this.img. length; I ++) {
　　// this.img [I] .style.zIndex = 0;
　　//}
　　// // the console.log (the this);
　　// this.img [this.index] .style.zIndex. 1 = ;

// 效果2：
　　// for(var i=0;i<this.img.length;i++){
　　// this.img[i].style.display = "none";
　　// }
　　// this.img[this.index].style.display = "block";

// 效果3：
　　// this.img[this.index].style.zIndex = this.i++;

// 效果4：
　　// this.img[this.index].style.zIndex = this.i++;
　　// this.img[this.index].style.width = "0";
　　// move(this.img[this.index],{width:1000});

// 效果5：
　　// this.img[this.index].style.zIndex = this.i++;
　　// this.img[this.index].style.width = "0";
　　// this.img[this.index].style.height = "0";
　　// move(this.img[this.index],{width:1000,height:260});

// 效果6：
　　// this.img[this.index].style.zIndex = this.i++;
　　// this.img[this.index].style.left = -1000 + "px";
　　// move(this.img[this.index],{left:0});

// 效果7：
　　this.img[this.index].style.zIndex = this.i++;
　　this.img[this.index].style.left = 1000 * d + "px";
　　move(this.img[this.index],{left:0});
}

var b = new Banner();