网页中的照片轮播

在很多网站当中，我们通常会看到有照片轮播的功能。

通常以这样的方式播放图片大致有以下几种优点：
1、网页更加美观
2、网站提供的内容表现得更加鲜明
3、节省网页空间

通过观察，我们发现大多数网站中的照片轮播都具有以下功能：
1、图片两侧具有切换图片功能的摁扭
2、图片底部具有显示图片序号的列表
3、图片上具有简短介绍图片的文字

在上述功能中，不同网站对这些功能的布局是不一样的。同时，不同网站图片的切换方式也是不一样的。而目的只有一个，就是为了让网页更加美观。 而对于我们刚刚起步学习网页制作的新手来说，像这种照片轮播应该怎么做呢？这里梳理一下大致的思路：通过在HTML文件中插入JavaScript代码来实现定时对标签、属性的修改。因此，网页展现在我们面前就是照片轮播的形式了。

文章将分层次逐步介绍照片轮播功能代码的编写。

( 本文仅供参考，文章中所展示的算法并非最优解决方案 )
代码标准：HTML5，CSS，JavaScript

---

目录

一、实现图片变换

二、添加翻页摁扭

三、图片介绍

四、图片序号

五、预览代码

---

一、实现图片变换

首先，在index.html中编写img标签并使用id参数对其标记

<img id="change" src="#" alt="" />

在style.css中对img标签的样式进行宽高设置，

img{
	display: block;
	width: 720px;
	height: 405px;
}

现在我们来编写JavaScript部分的代码，主要完成定时更改img中的src属性

var image = new Array();			//声明数组用来存储要轮播图片的地址
image[0] = "../image1.png";			//为数组中每一个元素赋值图片的地址
image[1] = "../image2.png";
image[2] = "../image3.png";
image[3] = "../image4.png";
var i = -1;							//用来迭代图片次序的变量
document.getElementById("change").src = image[0];//初始化图片
function changeImg(){				//定义更改img标签中src属性的函数		
	i = (i + 1) % image.length;		//递增变量，用来指向下一张图片,并使变量不大于图片的数量
	document.getElementById("change").src = image[i];//更改src属性
}
var b = self.setInterval("changeImg()", 3000);//定时执行函数

这样我们就做出了最基本的照片轮播效果

二、添加翻页摁扭

首先，我们改进index.html中的代码，在img标签下添加两个a标签并外层套上div标签

<div class="box">
	<img id="change" src="#" alt="" />
	<a class="left" href="#" onClick="last()"><</a>
	<a class="right" href="#" onClick="next()">></a>
</div>

另外，再对style.css进行更改，编写两个a标签和div盒子的样式

.box{
	z-index: 1;
	position: relative;
	margin: 50px 240px 45px 240px;
	width: 720px;
	height: 405px;
}
.box .left,.right{
	z-index: 5;
	display: block;
	position: absolute;
	top: 40%;
	width: 50px;
	height: 80px;
	font-size: 60px;
	line-height: 70px;
	text-decoration: none;
	text-align: center;
	color: rgba(255,255,255,1.00);
	background:rgba(0,155,255,0.50);
}
.box .left{
	float: left;
	left: 20px;
}
.box .right{
	float: right;
	right: 20px;
}
.box img{
	display: block;
	width: 720px;
	height: 405px;
}

最后我们将两个摁扭的功能用JavaScript编写出来

function last(){
	self.clearInterval(b);						//清除计时
	i = (i + image.length - 1) % image.length;	//对变量进行递减操作
	document.getElementById("change").src = image[i];//替换图片
	b = self.setInterval("changeImg()", 3000);	//重新开始计时
}
function next(){
	self.clearInterval(b);
	i = (i + 1) % image.length;
	document.getElementById("change").src = image[i];
	b = self.setInterval("changeImg()", 3000);
}

这样我们就实现了摁扭翻页的功能

三、图片介绍

这一步，我们在img标签下加上一个div标签，并对其进行样式设置，然后用JavaScript为其轮流更换内容
index.html与style.css中添加的代码如下

<div id="imgText" class="text"></div>

.box .text{
	background: rgba(0,0,0,0.52);
	padding: 30px 10px 30px 10px;
	z-index: 3;
	text-align: left;
	font-size: 20px;
	line-height: 20px;
	color: rgba(255,255,255,1.00);
	width: 700px;
	position: absolute;
	bottom: 0px;
	margin: 0;
}

最后，我们改进JavaScript中的代码，使文字内容跟随图片一起切换

var image = new Array();			//声明数组用来存储要轮播图片的地址
		image[0] = "../image1.png";			//为数组中每一个元素赋值图片的地址
		image[1] = "../image2.png";
		image[2] = "../image3.png";
		image[3] = "../image4.png";
		var introduce = new Array();		//声明数组用来存储要文字内容
		introduce[0] = "Master Liu LOVE YOU !";//为数组中每一个元素赋值的文字内容
		introduce[1] = "Master Liu LOVE YOU Again !";
		introduce[2] = "Master Liu LOVEs YOU Three Thousand Times !";
		introduce[3] = "Master Liu COOL !";
		document.getElementById("change").src = image[0];//初始化图片
		document.getElementById("imgText").innerHTML = introduce[0];//初始化文字内容
		var i = -1;							//用来迭代图片次序的变量
		function changeImg(){				//定义更改img标签中src属性的函数		
			i = (i + 1) % image.length;		//递增变量，用来指向下一张图片,并使变量不大于图片的数量
			document.getElementById("change").src = image[i];//更改src属性
			document.getElementById("imgText").innerHTML = introduce[i];//更改文字内容
		}
		var b = self.setInterval("changeImg()", 3000);//定时执行函数
		function last(){
			self.clearInterval(b);						//清除计时
			i = (i + image.length - 1) % image.length;	//对变量进行递减操作
			document.getElementById("change").src = image[i];//替换图片
			document.getElementById("imgText").innerHTML = introduce[i];//替换文字内容
			b = self.setInterval("changeImg()", 3000);//重新计时
		}
		function next(){
			self.clearInterval(b);
			i = (i + 1) % image.length;	
			document.getElementById("change").src = image[i];
			document.getElementById("imgText").innerHTML = introduce[i];
			b = self.setInterval("changeImg()", 3000);
		}

四、图片序号

我们在index.html中加入li标签作为序号，并在style.css中对其设置样式

<div class="box">
	<img id="change" src="../image1.png" alt="" />
	<div id="imgText" class="text"></div>
	<ul id="num" class="imgBottom">
		<li class onClick="jump(0)" >1</li>
		<li class onClick="jump(1)" >2</li>
		<li class onClick="jump(2)" >3</li>
		<li class onClick="jump(3)" >4</li>
	</ul>
	<a class="left" href="#" onclick="last();" ><</a>
	<a class="right" href="#" onclick="next();" >></a>
</div>

.box .imgBottom{
	z-index: 4;
	display: inline-block;
	position: absolute;
	margin: 0;
	left: 45%;
	bottom: 0;
	padding-bottom: 5px;
	padding-inline-start :0px;
}
.box .imgBottom li{
	display: inline-block;
	width: 15px;
	height: 15px;
	background: rgba(150,150,150,1.00);
	color: rgba(255,255,255,1.00);
	font-size: 12px;
	text-align: center;
	line-height: 12px;
}
.box .imgBottom .active{
	background: rgba(255,255,255,1.00);
}

我们再更新JavaScript以实现它的点击和切换功能

var image = new Array();			//声明数组用来存储要轮播图片的地址
		image[0] = "../image1.png";			//为数组中每一个元素赋值图片的地址
		image[1] = "../image2.png";
		image[2] = "../image3.png";
		image[3] = "../image4.png";
		var introduce = new Array();		//声明数组用来存储要文字内容
		introduce[0] = "Master Liu LOVE YOU !";//为数组中每一个元素赋值的文字内容
		introduce[1] = "Master Liu LOVE YOU Again !";
		introduce[2] = "Master Liu LOVEs YOU Three Thousand Times !";
		introduce[3] = "Master Liu COOL !";
		document.getElementById("change").src = image[0];//初始化图片
		document.getElementById("imgText").innerHTML = introduce[0];//初始化文字内容
		var items = document.getElementById("num").getElementsByTagName("li");//定义序号数组
		items[0].className = "active";//初始化序号
		var i = -1;							//用来迭代图片次序的变量
		function changeImg(){				//定义更改img标签中src属性的函数	
			i = (i + 1) % image.length;		//递增变量，用来指向下一张图片,并使变量不大于图片的数量
			exI();
			document.getElementById("change").src = image[i];//更改src属性
			document.getElementById("imgText").innerHTML = introduce[i];//更改文字内容
		}
		var b = self.setInterval("changeImg()", 3000);//定时执行函数
		function last(){
			self.clearInterval(b);						//清除计时
			i = (i + image.length - 1) % image.length;	//对变量进行递减操作	
			exI();
			document.getElementById("change").src = image[i];//替换图片
			document.getElementById("imgText").innerHTML = introduce[i];//替换文字内容
			b = self.setInterval("changeImg()", 3000);//重新开始计时
		}
		function next(){
			self.clearInterval(b);
			i = (i + 1) % image.length;	
			exI();
			document.getElementById("change").src = image[i];
			document.getElementById("imgText").innerHTML = introduce[i];
			b = self.setInterval("changeImg()", 3000);
		}
		function exI(){
			for(var j = 0; j < items.length; j++){
				items[j].className = "";
				if(i == j)
					items[i].className = "active";
			}
		}
		function jump(k){//接收li标签的位置
			self.clearInterval(b);//清除计时
			i = k;//将选中的序号赋值给i
			document.getElementById("change").src = image[i];//替换图片
			document.getElementById("imgText").innerHTML = introduce[i];//替换文字内容
			exI();//改变序号显示
			b = self.setInterval("changeImg()", 3000);//重新开始计时
		}

效果如图

五、预览代码

至此，一个简单的照片轮播效果就制作完成了。以下是全部代码：

index.html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>explem</title>
</head>
<body>
	<div class="box">
		<img id="change" src="../image1.png" alt="" />
		<div id="imgText" class="text"></div>
		<ul id="num" class="imgBottom">
			<li class onClick="jump(0)" >1</li>
			<li class onClick="jump(1)" >2</li>
			<li class onClick="jump(2)" >3</li>
			<li class onClick="jump(3)" >4</li>
		</ul>
		<a class="left" href="#" onclick="last();" ><</a>
		<a class="right" href="#" onclick="next();" >></a>
	</div>
	<script>
		var image = new Array();			//声明数组用来存储要轮播图片的地址
		image[0] = "../image1.png";			//为数组中每一个元素赋值图片的地址
		image[1] = "../image2.png";
		image[2] = "../image3.png";
		image[3] = "../image4.png";
		var introduce = new Array();		//声明数组用来存储要文字内容
		introduce[0] = "Master Liu LOVE YOU !";//为数组中每一个元素赋值的文字内容
		introduce[1] = "Master Liu LOVE YOU Again !";
		introduce[2] = "Master Liu LOVEs YOU Three Thousand Times !";
		introduce[3] = "Master Liu COOL !";
		document.getElementById("change").src = image[0];//初始化图片
		document.getElementById("imgText").innerHTML = introduce[0];//初始化文字内容
		var items = document.getElementById("num").getElementsByTagName("li");//定义序号数组
		items[0].className = "active";//初始化序号
		var i = -1;							//用来迭代图片次序的变量
		function changeImg(){				//定义更改img标签中src属性的函数	
			i = (i + 1) % image.length;		//递增变量，用来指向下一张图片,并使变量不大于图片的数量
			document.getElementById("change").src = image[i];//更改src属性
			document.getElementById("imgText").innerHTML = introduce[i];//更改文字内容
			exI();
		}
		var b = self.setInterval("changeImg()", 3000);//定时执行函数
		function last(){
			self.clearInterval(b);						//清除计时
			i = (i + image.length - 1) % image.length;	//对变量进行递减操作	
			document.getElementById("change").src = image[i];//替换图片
			document.getElementById("imgText").innerHTML = introduce[i];//替换文字内容
			exI();
			b = self.setInterval("changeImg()", 3000);
		}
		function next(){
			self.clearInterval(b);
			i = (i + 1) % image.length;	
			document.getElementById("change").src = image[i];
			document.getElementById("imgText").innerHTML = introduce[i];
			exI();
			b = self.setInterval("changeImg()", 3000);
		}
		function jump(k){//接收li标签的位置
			self.clearInterval(b);//清除计时
			i = k;//将选中的序号赋值给i
			document.getElementById("change").src = image[i];//替换图片
			document.getElementById("imgText").innerHTML = introduce[i];//替换文字内容
			exI();//改变序号显示
			b = self.setInterval("changeImg()", 3000);//重新开始计时
		}
		function exI(){
			for(var j = 0; j < items.length; j++){
				items[j].className = "";
				if(i == j)
					items[i].className = "active";
			}
		}
	</script>
</body>
</html>

style.css:

@charset "utf-8";
/* CSS Document */
html,body{
	width:1300px;
	height:1000px;
}
.box{
	position: relative;
	z-index: 1;
	width: 720px;
	height: 405px;
}
.box .left,.right{
	z-index: 5;
	display: block;
	position: absolute;
	top: 40%;
	width: 50px;
	height: 80px;
	font-size: 60px;
	line-height: 70px;
	text-decoration: none;
	text-align: center;
	color: rgba(255,255,255,1.00);
	background: rgba(0,155,255,0.50);
}
.box .left{
	float: left;
	left: 20px;
}
.box .right{
	float: right;
	right: 20px;
}
.box img{
	display: block;
	width: 720px;
	height: 405px;
}
.box .text{
	background: rgba(0,0,0,0.52);
	padding: 30px 10px 30px 10px;
	z-index: 3;
	text-align: left;
	font-size: 20px;
	line-height: 20px;
	color: rgba(255,255,255,1.00);
	width: 700px;
	position: absolute;
	bottom: 0px;
	margin: 0;
}
.box .imgBottom{
	z-index: 4;
	display: inline-block;
	position: absolute;
	margin: 0;
	left: 45%;
	bottom: 0;
	padding-bottom: 5px;
	padding-inline-start :0px;
}
.box .imgBottom li{
	display: inline-block;
	width: 15px;
	height: 15px;
	background: rgba(150,150,150,1.00);
	color: rgba(255,255,255,1.00);
	font-size: 12px;
	text-align: center;
	line-height: 12px;
}
.box .imgBottom .active{
	background: rgba(255,255,255,1.00);
}

之后，我们还可以设置一些过渡效果和字体让我们的照片轮播功能更加美观。

---

此外，以上代码并非最优解决方案，还有很多可以改进的地方。

如果您还有其他的见解，请您指教！