无缝轮播的几种方式

无缝轮播图的几种实现方式

文章主要介绍几种瀑布流的实现方式。
第一种方式是以计算索引的方法操作图片的进出。

	OOA:轮播图:点击左右切换图片
	1.选择元素
	1-1.计算imgbox的宽度
	2.绑定事件
		3.计算索引
		4.根据索引显示图片

	
OOD:
function Banner(){
	属性
1.选择元素
2.开始绑定事件
		this.addEvent()
}
Banner.prototype.addEvent = function(){
	绑定事件的功能
		3.开始计算索引
		this.changeIndex()
}
Banner.prototype.changeIndex = function(){
计算索引的功能
	4.根据索引显示当前
	this.setActive();
}
Banner.prototype.setActive = function(){
	根据索引显示当前的功能
}

//		OOP:
		function Banner(){
	//		属性
	//		1.选择元素
			this.left = document.getElementById("left");
			this.right = document.getElementById("right");
			this.img = document.querySelectorAll(".imgbox a");
			
//			*1.要进来的
			this.index = 0;
//			*2.要走的
			this.iPrev = this.img.length-1;
	//		2.开始绑定事件
			this.abc()
		}
		Banner.prototype.abc = function(){
			var that = this;
	//		绑定事件的功能
			this.left.onclick = function(){
	//			3.开始计算索引
				that.changeIndex(1)
			}
			this.right.onclick = function(){
	//			3.开始计算索引
				that.changeIndex(-1)
			}
		}
		Banner.prototype.changeIndex = function(d){
			if(d == 1){
		//		计算索引的功能
				if(this.index == 0){
					this.index = this.img.length-1;
	//				*3.设置要走的索引
					this.iPrev = 0;
				}else{
					this.index--;
	//				*3.设置要走的索引
					this.iPrev = this.index + 1;
				}
			}else{
		//		计算索引的功能
				if(this.index == this.img.length-1){
					this.index = 0;
	//				*3.设置要走的索引
					this.iPrev = this.img.length-1
				}else{
					this.index++;
	//				*3.设置要走的索引
					this.iPrev = this.index - 1;
				}
			}
	//		4.根据索引显示当前
			this.setActive(d);
		}
		Banner.prototype.setActive = function(d){
	//		根据索引显示当前的功能
	//			console.log(this.iPrev,this.index)
	//			*4.根据要走的索引,先设置初始位置,再开始走
			this.img[this.iPrev].style.left = 0;
			move(this.img[this.iPrev],{left:this.img[0].offsetWidth * d})
			
	//			*5.根据要进来的索引,先设置初始位置,再开始进
			this.img[this.index].style.left = -this.img[0].offsetWidth * d + "px";
			move(this.img[this.index],{left:0})
		}

第二种是在最后一个图片插入第一张图片，控制整体的位置实现轮播。
OOA:无缝轮播,点击按钮切换图片:操作要走的和要进来的
1.选择元素
2.绑定事件
3.计算索引:要走的,要进来的
4.根据索引,使用move移动图片

	OOD:
function Banner(){
	属性
	1.选择元素
	2.开始绑定事件
		this.addEvent()
}
Banner.prototype.addEvent = function(){
	绑定事件的功能
		3.开始计算索引
		this.changeIndex()
}
Banner.prototype.changeIndex = function(){
	计算索引的功能
	4.根据索引显示当前
	this.setActive();
}
Banner.prototype.setActive = function(){
根据索引显示当前的功能
}

//		OOP:
		function Banner(){
	//		属性
	//		1.选择元素
			this.left = document.getElementById("left");
			this.right = document.getElementById("right");
			this.img = document.querySelectorAll(".imgbox a");
			
//			*1.要进来的
			this.index = 0;
//			*2.要走的
			this.iPrev = this.img.length-1;
	//		2.开始绑定事件
			this.abc()
		}
		Banner.prototype.abc = function(){
			var that = this;
	//		绑定事件的功能
			this.left.onclick = function(){
	//			3.开始计算索引
				that.changeIndex(1)
			}
			this.right.onclick = function(){
	//			3.开始计算索引
				that.changeIndex(-1)
			}
		}
		Banner.prototype.changeIndex = function(d){
			if(d == 1){
		//		计算索引的功能
				if(this.index == 0){
					this.index = this.img.length-1;
	//				*3.设置要走的索引
					this.iPrev = 0;
				}else{
					this.index--;
	//				*3.设置要走的索引
					this.iPrev = this.index + 1;
				}
			}else{
	//		计算索引的功能
				if(this.index == this.img.length-1){
					this.index = 0;
	//				*3.设置要走的索引
					this.iPrev = this.img.length-1
				}else{
					this.index++;
	//				*3.设置要走的索引
					this.iPrev = this.index - 1;
				}
			}
	//		4.根据索引显示当前
			this.setActive(d);
		}
		Banner.prototype.setActive = function(d){
	//		根据索引显示当前的功能
	//			console.log(this.iPrev,this.index)
	//			*4.根据要走的索引,先设置初始位置,再开始走
			this.img[this.iPrev].style.left = 0;
			move(this.img[this.iPrev],{left:this.img[0].offsetWidth * d})
			
	//			*5.根据要进来的索引,先设置初始位置,再开始进
			this.img[this.index].style.left = -this.img[0].offsetWidth * d + "px";
			move(this.img[this.index],{left:0})
		}
		
		new Banner();