JavaScript||轮播图2.0（功能完整）

昨天发的轮播图功能实在太单一了，感谢互联网，今天在网上学习了如何制作一个功能全面的轮播图，咱就喊他2.0吧。
相较前面的轮播图1.0，轮播图2.0版本加了左右键实现向左向右移动，实现了点击小圆点跳转致相应图片以及图片无缝连接。。。
下面分享给大家

HTML页面布局

此次主要用了主流轮播图常用的几种标签“ul"、“ol” 、”li“ 标签：

<div id="divAll">
			<a href="##" id="left">
				<img src="img/左.png" >
			</a>
			<a href="##" id="right">
				<img src="img/右.png" >
			</a>
			<ul >
				<li ><a href="##"><img src="img/1.png" /></a></li>
				<li ><a href="##"><img src="img/2.png" /></a></li>
				<li ><a href="##"><img src="img/3.png" /></a></li>
				<li ><a href="##"><img src="img/4.png" /></a></li>
				<li ><a href="##"><img src="img/1.png" /></a></li>
			</ul>
			<ol class="circle">
				<!--动态获取小圆点-->	
			</ol>
		</div>

CSS样式设计

在利用CSS进行样式添加时，应用了不少新鲜的属性:

1. z-index:整数；
   它是用来调整块与块之间的堆叠顺序的，默认值是0，整数越大，拥有更高的堆叠顺序，即位于更上层。
   而我在实际应用时，由于应用了另一个属性（float）的同时，再用z-index,发现它失效了，百度说是float和z-index 不能共存，害，反正改了好久…
   2）position：absolute/relative/static/…
   这里最主要想记录下前两个的区别：
   absolute是绝对定位的意思，如果A使用了绝对定位，A的位置相对于最近的已定位祖先元素，如果其所有祖先元素均未定位，那么A的位置相对于文档。
   position是相对定位的意思，相对定位的元素的位置是相对于自己当前的位置来作为参照标准进行移动的。
   好，说了这么多有的没的，下面直接上CSS代码：

*{
	margin: 0;
	padding: 0;
	
}
body{
	width: auto;
	height: auto;
}
#divAll {
	width: 600px;
	height: 400px;
	border: 4px solid black;
	border-radius: 16px;
	position: absolute;
	overflow: hidden;
}
ul{
	position: absolute;
	top: 0;
	left: 0;
	width: 600%;
	height: 400px;
}
ul img{
	width: 600px;
	height: 400px;
	float: left;
}
li{
	list-style: none;
	float: left;
}
.circle{
	position: absolute;
    bottom: 10px;
    left: 50px ;
}
.circle li{
	width: 12px;
	height: 12px;
	border: 2px solid rgb(255,255,255,0.5);
	margin: 0 3px;
	border-radius: 50%;
	cursor: pointer;
	
}
.pickIt{
	background-color: white;
}
#left{
	display: none;
	position: absolute;
	top: 50%;
	left: 0;
	background: rgba(0,0,0,.3);
	text-align: center;
	z-index: 999;
}
#right{
	display: none;
	position: absolute;
	top: 50%;
	right: 0;
	background: rgba(0,0,0,.3);
	text-align: center;
	z-index: 999;
}
#left img,#right img{
	width: 30px;
	height: 30px;
	
}

这是添加样式后的图：

JavaScript实现轮播

在前面的基础上，这次还用了下面的函数：
1） createElement（）函数和appendChild（）函数用来动态添加小圆点
2） setAttribute（）函数用来设置小圆点的”index"值，方便后期轮播效果实现时改变原点
其他基本上没有什么新鲜的了，都是前面的老朋友（不过，建议大家将动画效果进行封装，方便调用而且减少代码量），主要的注释都写了，嘻嘻，下面放js源代码：

window.onload = function(){
	//获取左右按钮id
	var leftBtn = document.getElementById("left");
	var rightBtn = document.getElementById("right");
	//获取div容器id
	var divAll = document.getElementById("divAll");
	//获取图片个数
	var num = divAll.querySelector("ul").children.length;
	//获取ol
	var idPots = divAll.querySelector('ol');
	//获取ul
	var imgBox = divAll.querySelector('ul');

	//动态生成小圆点
	for(var x = 0; x < num - 1 ; x++){
		var smallPot = document.createElement("li");//生成
		smallPot.setAttribute('index', x);//设置索引号，方便后面轮播实现
		idPots.appendChild(smallPot);//插入
		
		//绑定点击事件，实现排他,并移动
		smallPot.onclick = function(){
			//清空所有小圆点的类名
			for(var y =0; y < num - 1; y++){
				idPots.children[y].className = '';
			}
			//给自己添加类名
			this.className = "pickIt";
			
			//图片盒子（ul)移动
			var index = this.getAttribute('index');
			temp = index;
			xiaoyuandian = index;
			//判断左移动还是右移动
			if(-imgBox.offsetLeft / 600 < index){
				var timer1 = setInterval(function(){
					if(imgBox.offsetLeft > -(600 * index)){
						imgBox.style.left = imgBox.offsetLeft - 10 + 'px';
					}else{
						clearInterval(timer1);
					}		    
				}, 1);
				
			}else{
				var timer2 = setInterval(function(){
					if(imgBox.offsetLeft < -(600 * index)){
						imgBox.style.left = imgBox.offsetLeft + 10 + 'px';
					}else{
						clearInterval(timer2);
					}	
				}, 1);
			}
		}
	}
	idPots.children[0].className = "pickIt";//设计第一个节点的className

	divAll.onmouseenter = function(){ //鼠标经过事件
		leftBtn.style.display = 'block';
		rightBtn.style.display = 'block';
		clearInterval(timer0);//开始自动播放
	}
	divAll.onmouseleave = function(){//鼠标离开事件
		leftBtn.style.display = "none";
		rightBtn.style.display = "none";
		//重新开始默认自动播放
		timer0 = setInterval(function(){
		    rightBtn.onclick();
	    }, 1000);
	}

	var temp = 0;
	var xiaoyuandian = 0;
	//左移换图
	leftBtn.onclick = function(){
		temp--;
		if(temp <= 0){
			temp = num - 1;
			imgBox.style.left = -temp * 600 + 'px';
		}
		var t = 0;
		var timer3 = setInterval(function(){
			if(t < 600){
				imgBox.style.left = imgBox.offsetLeft + 10 + 'px';
				t +=10;
			}else{
				clearInterval(timer3);
			}		    
		}, 1);
		
		xiaoyuandian--;
		if(xiaoyuandian < 0){
			xiaoyuandian = num - 2;
		}
		for(var x = 0 ; x < idPots.children.length; x++){
			idPots.children[x].className = '';
		}
		idPots.children[xiaoyuandian].className = 'pickIt';
	}
	//右移换图
	rightBtn.onclick = function(){
		temp ++;
		if(temp == num){
			imgBox.style.left = 0;
			temp = 1;//temp = 0 有bug
		}
		var t = 0;
		var timer3 = setInterval(function(){
			if(t < 600){
				imgBox.style.left = imgBox.offsetLeft - 10 + 'px';
				t +=10;
			}else{
				clearInterval(timer3);
			}		    
		}, 1);
		
		xiaoyuandian++;
		if(xiaoyuandian == num - 1){
			xiaoyuandian = 0;
		}
		for(var x = 0 ; x < idPots.children.length; x++){
			idPots.children[x].className = '';
		}
		idPots.children[xiaoyuandian].className = 'pickIt';
	}
	
	//默认自动播放事件(和按右侧按钮一样)
	var timer0 = setInterval(function(){
		rightBtn.onclick();
	}, 1000);
	
}

动态效果图

这是下载链接：//download.csdn.net/download/qq_43543920/12341240

轮播图2.0