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

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

功能：

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style/style.css">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
	<div class="container">
		<!-- 图片轮播： -->
		<ul class="list">
			<li class="list-items active"><a href="images/1.png"><img src="images/1.png" alt="1.png"></a></li>
			<li class="list-items"><a href="images/2.jpg"><img src="images/2.jpg" alt="2.jpg"></a></li>
			<li class="list-items"><a href="images/3.jpg"><img src="images/3.jpg" alt="3.jpg"></a></li>
			<li class="list-items"><a href="images/4.jpg"><img src="images/4.jpg" alt="4.jpg"></a></li>
		</ul>
		<!-- 两侧按钮 -->
		<div class="control">
			<p class="prev" id="prev"><</p>
			<p class="next" id="next">></p>
		</div>
		<!-- 小圆点 -->
		<div class="icon-bar">
			<p class="icon"></p>
			<p class="icon"></p>
			<p class="icon"></p>
			<p class="icon"></p>
		</div>
	</div>
	<script src="JS/index1.js"></script>
</body>
</html>

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<This.len;i++) {
			This.items[i].className = 'list-items';
			This.icon[i].style.backgroundColor = '';
		}
		console.log(This.num);
		This.items[This.num].className = 'list-items active';
		This.icon[This.num].style.backgroundColor = 'red';
	}
 }
 //prev按钮：
 ShowPic.prototype.prev1 = function() {
 	var This = this;
 	this.prev.onclick = function() {
 		if(This.num == 0) {
 			This.num = This.len-1;
 		}else {
 			This.num--;
 		}
 		for(var i = 0; i<This.len;i++) {
			This.items[i].className = 'list-items';
			This.icon[i].style.backgroundColor = '';
		}
		//console.log(This.num);
		This.items[This.num].className = 'list-items active';
		This.icon[This.num].style.backgroundColor = 'red';
 	}
 }	
 //自动轮播：
 ShowPic.prototype.autoPlay = function() {
 	var This = this;
 	setInterval(function() {
 		if(This.num == This.len-1){
			This.num = 0;
		}else {
			This.num++;
		}
 		for(var i = 0; i<This.len;i++) {
			This.items[i].className = 'list-items';
			This.icon[i].style.backgroundColor = '';
		}
		//console.log(This.num);
		This.items[This.num].className = 'list-items active';
		This.icon[This.num].style.backgroundColor = 'red';
 	},5000);
 }
 // 小圆点点击功能：
 ShowPic.prototype.clickIcon = function(){
 	var This = this;
 	var index = 0;
 	for(var i =0;i<this.len;i++ ){
 		this.icon[i].index = i;
 		this.icon[i].onclick = function() {
		for(var j = 0;j<This.len;j++){
			This.items[j].className = 'list-items';
			This.icon[j].style.backgroundColor = '';
		}
 		This.items[this.index].className = 'list-items active';
		This.icon[this.index].style.backgroundColor = 'red';
 		}
 	}
 }

总结：

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

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

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

功能：

代码：

相关推荐