js轮播

js轮播

轮播：指的是图片间隔n秒循环性的播放
知识点：if/else、for语句、DOM操作、事件绑定、定时器

这里简单说明一下js所做的事情的思路：
1、单击箭头事件：单击便会执行判断和循环并添加一个类和调用函数。

2、底部的数字导航事件：效果是点击显示相应的图片，分别是循环buttons类下的全部li，做一个单击当前下标(图片)所有触发的添加类事件。

3、自动播放：首先定义一个timer变量用来保存setInterval;setInterval函数里面调用了单击下一张图片函数。

4、鼠标滑入事件/鼠标滑出事件：目的是停留在某张图片，停止自动播放和恢复自动播放;当鼠标滑入时则触发onmouseenter,滑出触发onmouseleave。

5、点击图片放大：循环全部img的上一级全部li，并做了单击当前下标（图片）事件 便会执行里面的函数在DIV.imgadd里面使用innerHTML的方式将当前被点击的li里面的img标签插入到DIV.imgadd里面并添加了imgwidth类

最终效果：

示意图：

1. HTML

   <div class="imgadd"></div>
   <div class="box">
   	<div class="wrap">
   		<ul>
   			<li class="shows"><img src="img/1.jpeg" alt=""></li>
   			<li><img src="img/2.jpeg" alt=""></li>
   			<li><img src="img/3.jpeg" alt=""></li>
   			<li><img src="img/4.jpeg" alt=""></li>
   			<li><img src="img/5.jpeg" alt=""></li>
   			<li><img src="img/6.jpeg" alt=""></li>
   		</ul>
   	</div>
   	<a href="javascript:;" class="btn btn_left"><img src="img/jiantou_zuo.png" alt=""></a>
   	<a href="javascript:;" class="btn btn_right"><img src="img/jiantouzuo.png" alt=""></a>
   	<div class="buttons">
   		<ul>
   			<li class="on">1</li>
   			<li>2</li>
   			<li>3</li>
   			<li>4</li>
   			<li>5</li>
   			<li>6</li>
   		</ul>
   	</div>
   </div>
   

2. CSS

   *{padding: 0;margin:0;}
   .box{
   	position: relative;
   	margin: 50px auto;
   	width: 600px;
   	height: 354px;
   	overflow: hidden;
   	box-shadow: darkgrey 10px 10px 30px 5px;/*边框阴影*/
   }
   .wrap{
   	z-index: 1;
   	width: 3600px;
   	height: 354px;
   }
   //这里设置的绝对定位，让图片叠在一起了，所以跟上面的示意图不一样了。
   .wrap ul li{
   	position: absolute;
   	left: 0;
   	top: 0;
   	display: block;
   	float: left;
   	list-style: none;
   	text-decoration: none;
   	opacity: 0;
   	transition: 1s;
   }
   .wrap ul li.shows{
   	z-index: 2;
   	opacity: 1;
   	cursor: pointer;
   }
   .wrap ul li img{
   	width: 100%;
   	height: 100%;
   }
   .wrap ul li.opaitys{
   	opacity: 1;
   }
   .btn{
   	z-index: 2;
   	position: absolute;
   	width: 50px;
   	height: 50px;
   	top: 50%;
   	margin-top: -25px;
   	display: block;
   }
   .btn img{
   	width: 100%;
   	height: 100%;
   	display: block;
   }
   .btn_left{
   	left: 20px;
   }
   .btn_right{
   	right: 20px;
   }
   .buttons{
   	z-index: 2;
   	position: absolute;
   	left: 50%;
   	bottom: 20px;
   	margin-left: -125px;
   	height: 20px;
   }
   .buttons ul li{
   	float: left;
   	margin: 0 16px;
   	width: 20px;
   	height: 20px;
   	background: black;
   	border-radius: 50%;
   	color: white;
   	list-style: none;
   	text-align: center;
   	line-height: 20px;
   	font-size: 12px;
   	cursor: pointer;
   }
   .buttons ul li.on{
   	font-weight: bold;
   	color: red;
   	font-size: 14px;
   }
   .imgwidth img{
   	width: 100%;
   	height: 100%;
   	display: block;
   }
   .imgadd{
   	width: 100%;
   	height: 100%;
   	z-index: 1;
   	position: absolute;
   	top: 0;
   }
   .imgwidth{
   	z-index: 3;
   	width: 100%;
   	height: 100%;
   	position: absolute;
   	top: 0;
   }
   

3. JS

   window.onload=function(){
   	// 定义对象
   	var index = 0;
   	var timer;
   	// 获取对象
   	var box = document.querySelector(".box");			//父级
   	var next = document.querySelector(".btn_right");	//下一张图片
   	var prev = document.querySelector(".btn_left");		//上一张图片
   	var wrap = document.querySelector(".wrap").getElementsByTagName("li");	//获取图片上一级DOM
   	var imgadd = document.querySelector(".imgadd");							//图片插入
   	var buttons = document.querySelector(".buttons").getElementsByTagName("li"); //获取数字按钮
   
   	// 定义点击下一张图片函数
   	next.onclick=function(){
   		next_pioc();
   	}
   	// 定义点击上一张图片函数
   	prev.onclick=function(){
   		prev_pioc();
   	}
   
   	// 调用点击下一张图片函数
   	function next_pioc(){
   		index++;
   		if(index > 5){
   			index=0;
   		}
   		//wrap类下面的所有li类定义为空
   		for(var i = 0,len = wrap.length;i < len;i++){
   			// console.log(wrap[i]);
   			wrap[i].className="";		//全部li类为空
   		}
   		wrap[index].className="shows";	//对当前下标的li添加类
   		// 调用外围函数
   		showBtn();
   	}
   	// 调用点击上一张图片函数
   	function prev_pioc(){
   		index--;
   		if(index < 0){
   			index=5;
   		}
   		for(var i = 0,len = wrap.length;i <　len;i++){
   			wrap[i].className="";
   		}
   		wrap[index].className="shows";
   		// 调用外围函数
   		showBtn();
   	}
   
   	// 数字按钮添加样式
   	function showBtn(){
   		//buttons类下面的所有li类定义为空
   		for(var i = 0,len = buttons.length;i < len;i++){
   			buttons[i].className="";	//全部li类为空
   		}
   		buttons[index].className="on";	//对当前下标的li添加类
   	}
   
   
   	//点击数字切换至相应的图片
   	for(var i = 0,len = buttons.length;i < len;i++){
   		// console.log(buttons[i]);
   		(function(i){
   			buttons[i].onclick=function(){
   				// console.log(buttons[i]);
   				index = i;
   				// 调用外围函数
   				showBtn();	//给点击的数字按钮添加样式
   				for(var j = 0,len = wrap.length;j < len;j++){	//循环wrap类下面的所有li并定义类为空
   					wrap[j].className="";
   				}
   				wrap[index].className="shows"	//当前下标添加样式
   			}
   		})(i);
   	}
   
   
   	//自动播放
   	function autoplay(){
   		timer=setInterval(function(){	//每隔2秒执行一次next_pioc();函数
   			next_pioc();				//调用函数
   		},2000)
   	}
   	autoplay();
   	//鼠标滑入事件
   	box.onmouseenter=function(){
   		clearInterval(timer);	//clearInterval停止执行timer的自动播放
   	}
   	//鼠标滑出事件
   	box.onmouseleave=function(){
   		autoplay();				//调用函数
   	}
   
   	
   	//点击图片放大
   	function imgMax(){
   		for(var h = 0,len = wrap.length;h < len;h++){	//循环所有img标签的上一级所有li
   			// console.log(wrap[h]);
   			(function(h){
   				wrap[h].onclick=function(){				//单击当前图片事件
   					// console.log(wrap[h]);
   					imgadd.innerHTML=wrap[h].innerHTML;	//在DVI.imgadd类插入当前下标img标签
   					imgadd.className="imgwidth";		//添加类
   				}
   			})(h);
   		}
   	}
   	imgMax();
   
   	//图片隐藏
   	imgadd.onclick=function(){
   		imgadd.innerHTML="";		//不输出img
   		imgadd.className="imgadd"	//添加类
   	}
   }