面向对象写轮播图

 

*****用到前面封装的运动

OOA:轮播图：图片切换，点击按钮切换，左右按钮，左上一张，右下一张
　　　　布局

　　　　js
　　　　　　1.选择元素,设定默认索引0
　　　　　　2.绑定事件
　　　　　　3.计算索引
　　　　　　4.根据索引切换图片

OOD:高内聚，低耦合
　　　　function Banner(){
　　　　　　1.选择元素,设定默认索引0
　　　　　　 2.执行绑定事件功能
　　　　this.addEvent();
　　　　　　　　}
　　　　Banner.prototype.addEvent = function(){
　　　　 定义绑定事件的功能
　　　　触发事件了
　　　　　　 3.执行计算索引的功能
　　　　this.changeIndex()
　　　　}
　　　　Banner.prototype.changeIndex = function(){
　　　　 定义计算索引的功能
　　　　 .....
　　　　　　4.执行切换图片的功能
　　　　this.abc()
　　　　}
　　　　Banner.prototype.abc = function(){
　　　　 定义切换图片的功能
　　　　}

　　

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

　　　　this.index = 0;

　　　　this.i = 1;
 2.执行绑定事件功能
　　　　this.addEvent();
　　　　}
　　Banner.prototype.addEvent = function(){
　　　　var that = this;
　　 定义绑定事件的功能
　　　　this.left.onclick = function(){
　　 触发事件了
 3.执行计算索引的功能
　　　　that.changeIndexL()
　　}
　　　　this.right.onclick = function(){
　　 触发事件了
 3.执行计算索引的功能
　　　　that.changeIndexR()
　　}
}
Banner.prototype.changeIndexL = function(){
　　 定义计算索引的功能
　　if(this.index == 0){
　　this.index = this.img.length-1
　　}else{
　　this.index--;
　　}
// 4.执行切换图片的功能
　　this.abc(1)
　　}
Banner.prototype.changeIndexR = function(){
// 定义计算索引的功能
　　　　if(this.index == this.img.length-1){
　　　　　　this.index = 0
　　　　　　}else{
　　　　　　this.index++
　　　　}
// 4.执行切换图片的功能
　　　　this.abc(-1)
　　　　}
　　Banner.prototype.abc = function(d){
// 定义切换图片的功能

// 效果1：
　　// for(var i=0;i<this.img.length;i++){
　　// this.img[i].style.zIndex = 0;
　　// }
　　// // console.log(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();