切换式轮播图

HTML部分

div><img src="img/2233.png"></div>
	<div class="wrap">
	  <ul class="list">                     
	    <li class="item active"><img src="img/2233_1.jpg" ></li>
	    <li class="item"><img src="img/2233_2.jpg" ></li>
	    <li class="item"><img src="img/2233_3.jpg" ></li>
	    <li class="item"><img src="img/2233_4.jpg" ></li>
	    <li class="item"><img src="img/2233_5.jpg" ></li>
	    <li class="item"><img src="img/2233_6.png" ></li>
	  </ul>
	  <ul class="pointList">
	  	<li class="point active" data-index="0"></li>
	  	<li class="point" data-index="1"></li>
	  	<li class="point" data-index="2"></li>
	  	<li class="point" data-index="3"></li>
	  	<li class="point" data-index="4"></li>
	  	<li class="point" data-index="5"></li>
	  </ul>
	  <button type="button" class="btn" id="goPre"> < </button> 
	  <button type="button" class="btn" id="goNext"> > </button>    
	</div>

CSS部分

* {
		  margin: 0;
		  padding: 0;
		  list-style: none;
		}
		.wrap{
			position: relative;
			width: 780px;
			height: 438px;
			margin: 100px auto 0 auto; 
		}
		/*.list{
			width: 780px;
			height: 438px;
			position: relative;
		}*/
		.item{
			width: 100%;
			height: 100%;
			position: absolute;
			/*规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明*/
			opacity: 0;
			/*设置元素过渡效果*/
			transition: all 2s;
		}
		.btn{
			width: 25px;
			height: 50px;
			position: absolute;
			color: white;
			border: none;
			top: 195px;
			z-index: 100;
			background-color: rgba(0,0,0,.4);
			cursor: pointer;
			/*清除button默认蓝边*/
			outline: none;
		}
		#goPre{
			left: 0;
		}
		#goNext{
			right: 0;
		}
		.item.active{
			z-index: 10;
			opacity: 1;
		}
		.pointList{
			padding-left: 0;
			position: absolute;
			right: 20px;
			bottom: 20px;
			z-index: 1000;
		}
		.point{
			width: 10px;
			height: 10px;
			background-color: rgba(0,0,0,.4);
			border-radius: 100%;
			float: left;
			margin-right: 14px;
			border-style: solid;
			border-width: 2px;
			border-color: rgba(255,255,255,.6);
		}
		.point:hover{
			background-color: rgba(50,50,50,.4);
			cursor: pointer;
		}
		.point.active{
			background-color: rgba(255,255,255,.3);
		}

JavaScript部分

		var wrap = document.getElementsByClassName("wrap")[0];
		// 获取所有图片
		var items = document.getElementsByClassName("item");

		// 获取所有圆钮
		var points = document.getElementsByClassName("point");

		// 获取切换上一张按键
		var goPreBtn = document.getElementById("goPre");

		// 获取切换下一张按键
		var goNextBtn = document.getElementById("goNext");

		// 设置定时器参数
		var time = 0;

		// 设置轮播参数
		var index = 0;

		// 重置所有样式
		var clearActive = function(){
			for(var i = 0;i < items.length;i++){
				items[i].className = "item";
				points[i].className = "point";
			}
		}

		// 切换图片后的样式变化
		var goIndex = function(){
			clearActive();
			items[index].className = "item active";
			points[index].className = "point active";
		}

		// 下一张按键方法
		var goNext = function(){
			if(index < items.length - 1){
				index ++;
			}else{
				index = 0;
			}
			goIndex();
		}

		// 上一张按键方法
		var goPre = function(){
			if(index == 0){
				index = 4;
			}else{
				index --;
			}
			goIndex()
		}

		// 下一张按键 监听器
		goNextBtn.addEventListener('click',function(){
			// 重置定时器
			time = 0;
			goNext();
		})

		// 上一张按键 监听器
		goPreBtn.addEventListener('click',function(){
			// 重置定时器
			time = 0;
			goPre();
		})

		// 圆点按钮
		for(var i = 0; i < points.length; i++){
			// 圆点 监听器
			points[i].addEventListener('click',function(){
				// 节点匹配
				var pointIndex = this.getAttribute("data-index");
				// 轮播参数传递
				index = pointIndex;
				// 重置定时器
				time = 0;
				goIndex();
			})
		}

		var times = setInterval(goNext,3000);

		// 鼠标悬停清除定时器
		wrap.onmouseover = function(){
			clearInterval(times);
		}

		//鼠标离开恢复定时器
		wrap.onmouseout = function(){
			times = setInterval(goNext,3000);
		}