原生JavaScript实现一个简单的轮播图功能

效果:

HTML结构：

<div id="pic" class="pic">
			<img  />
			<span>图片加载中...</span>
			<p>文本加载中...</p>
			<ul>
				<!--JavaScript生成li-->
			</ul>
			<a href="javascript:;" class="btn next">></a>
			<a href="javascript:;" class="btn prev"><</a>
		</div>

CSS样式：

<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			body{
				font-family: "微软雅黑";
				font-size: 14px;
				color: #555;
			}
			.pic{
				width: 420px;
				height: 530px;
				margin: 20px auto;
				position: relative;
				border: 1px solid #EEEEEE;
			}
			.pic img{
				width: 420px;
				height: 530px;
			}
			.pic span{
				position: absolute;
				top: 0px;
			}
			.pic p{
				position: absolute;
				bottom: 0px;
			}
			.pic span,.pic p{
				width: 420px;
				height: 40px;
				background: rgba(0,0,0,0.55);
				text-align: center;
				line-height: 40px;
				color: #fff;
			}
			.btn{
				position: absolute;
				width: 40px;
				height: 40px;
				color: #fff;
				text-align:center;
				line-height: 40px;
				top: 265px;
				background: rgba(0,0,0,0.55);
			}
			.prev{
				left: 0;
			}
			.next{
				right: 0;
			}
			.pic ul {
				position: absolute;
				width: 40px;
				top: 0;
				right: -50px;
			}
			.pic ul li{
				width: 40px;
				height: 40px;
				border: 1px solid #ddd;
			}
			.active{
				background: rgba(0,0,0,0.55);
			}
		</style>

JavaScript代码：

<script>
			var oPic = document.getElementById("pic");
			var oImg = oPic.getElementsByTagName("img")[0];
			var oSpan = oPic.getElementsByTagName("span")[0];
			var oP = oPic.getElementsByTagName("p")[0];
			var oUl = oPic.getElementsByTagName("ul")[0];
			var oLi = oPic.getElementsByTagName("li");
			var oA = oPic.getElementsByTagName("a");
			var arrImg = ["img/1.png","img/2.png","img/3.png","img/4.png"];
			var arrTxt = ["图片1","图片2","图片3","图片4"];
			var num = 0 ;

			//初始化
			oSpan.innerHTML = (num+1)+"/"+4;
			oP.innerHTML = arrTxt[num];
			oImg.src = arrImg[num];
			for (var i = 0 ; i<arrImg.length ; i++) {
				oUl.innerHTML+="<li></li>";
			}
			oLi[num].className = "active";
			//下一张
			oA[0].onclick = function(){
				num++ ;
				if(num>arrImg.length-1){
					num = 0;
				}
				oSpan.innerHTML = (num+1)+"/"+4;
				oP.innerHTML = arrTxt[num];
				oImg.src = arrImg[num];
				for (var i = 0 ; i<oLi.length ; i++) {
					oLi[i].className = "";
				}
				oLi[num].className = "active";
			}

			//上一张
			oA[1].onclick = function(){
				num-- ;
				if(num<0){
					num = arrImg.length-1;
				}
				oSpan.innerHTML = (num+1)+"/"+4;
				oP.innerHTML = arrTxt[num];
				oImg.src = arrImg[num];
				for (var i = 0 ; i<oLi.length ; i++) {
					oLi[i].className = "";
				}
				oLi[num].className = "active";
			}
			//图片与侧栏关联
			for (var i = 0 ; i<oLi.length ; i++) {
				oLi[i].index = i ;
				oLi[i].onclick = function(){
					for (var j = 0 ; j<oLi.length;j++) {
						oLi[j].className = "";
					}
					this.className = "active";
					num = this.index
					oSpan.innerHTML = (this.index+1)+"/"+4;
					oP.innerHTML = arrTxt[this.index];
					oImg.src = arrImg[this.index];
				}
			}
		</script>