使用面向对象思维制作轮播图（构造函数模式+原型模式）

 

最近看了一位大佬的博客，讲的是他对面向对象思维的理解，我看了也受益良多，所以活学活用利用面向对象思维制作了一个具有完整功能的轮播图：

功能：

1. 点击图片两侧的黑灰色按钮可以实现页面的前后切换。
2. 点击图片下面的小圆点可以实现指定跳转。
3. 使用定时器，实现图片的自动轮播。

代码：

	
	
	
	


	

		
		

			

			

			

			

		
		
		

			
<
			
>
		
		
		

			

			

			

			

		
	
	

 

body,div,p,ul,li {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
/*图片主体*/
.container {
	width: 400px;
	height: 300px;
	box-shadow: 0 0 10px 5px black;
	position: relative;
	margin: 20px auto;
}
.container .list {
	width: 100%;
	height: 100%;
}
.container .list .list-items {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: 1s;
}
.container .list .active {
	opacity: 1;
}
.container .list .list-items img {
	width: 400px;

}
.container .list .list-items a {
	display: block;
	width: 100%;
	height: 100%;
}
/*上下翻动按钮样式*/
.container .control p {
	width: 40px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: rgba(0,0,0,.6);
	position: absolute;
	top: 50%;
	margin-top: -15px;
	cursor: pointer;
}
.container .control .next {
	right: 0;
}
/*图片选择图标样式*/
.container .icon-bar {
	width: 140px;
	height: 20px;
	position: absolute;
	bottom: 10px;
	left: 50%;
	margin-left: -70px;
}
.container .icon-bar .icon {
	float: left;
	width: 20px;
	height: 20px;
	background-color: #eee;
	margin-right: 20px;
	line-height: 20px;
	border-radius: 50%;
	cursor: pointer;
}
/*.container .icon-bar .active {
	background-color: lightblue;
}*/
.container .icon-bar .icon:last-child {
	margin-right: 0;
}

window.onload = function() {
    //创建对象实例：
	var lunbo = new ShowPic();
	lunbo.next1();
	lunbo.prev1();
	lunbo.autoPlay();
	lunbo.clickIcon();
}
//定义轮播对象：
function ShowPic() {
	this.items = document.getElementsByClassName('list-items');
	this.prev = document.getElementById('prev');
	this.next = document.getElementById('next');
	this.icon = document.getElementsByClassName('icon');
	this.len = this.items.length;
	this.num = 0;
}
//next按钮：
ShowPic.prototype.next1 = function() {
	var This = this;
	this.next.onclick = function() {
		if(This.num == This.len-1){
			This.num = 0;
		}else {
			This.num++;
		}
		for(var i = 0; i

总结：

1.学习面向对象编程思维，可以将我需要的功能从复杂变到简单，更加利于代码的维护，编程的方向更明确。

2.妙用this对象，实现简单代码无法实现的功能。