【JS实例】原生JS轮播图之旋转木马（自动、手动切换）

前言
轮播图是开发网站、app不可缺少的页面结构。轮播图有很多种，3D模式，碎片化等。这里简单写一种旋转木马形式的，如下面图：

实现原理：
左右两侧效果用的是transform的rotateY属性，使图片看起开具有3D效果，分别定义三种状态的样式，然后每次调换图片的样式

源码（主要代码附带解释）：
css：

        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
		body{
			width: 100%;
			height: 100%;
			background: #253242;
		}
		/* 大盒子 */
		.box{
			height: 300px;
			width: 800px;
			margin: 50px auto;
			position: relative;
		}
		
		.box .imgbox{
			height: 250px;
			width: 800px;
			overflow: hidden;
			position: relative;
			-webkit-perspective: 1000px;
		}
		.box .imgbox li{
			
			position: absolute;
			width: 500px;
			height: 250px;
			transition:all  0.5s linear;
		}
		.box .imgbox li img{
			width: 100%;
			height: 100%;
		}
		/* 左侧图片样式 */
		.box .imgbox .img1{ 
			height: 180px;
			width: 400px;
			top:35px;
			left:0;
			z-index: 0;
			opacity: 0.8;
			transform:rotateY(40deg);
		}
		/* 中间图片样式 */
		.box .imgbox .img2{
			left: 150px;
			top:0;
			opacity: 1;
			z-index: 99;
		}
		/* 右侧图片样式 */
		.box .imgbox .img3{
			width: 400px;
			left: 400px;
			height: 180px;
			top:35px;
			opacity: 0.8;
			transform:rotateY(-40deg);

		}

		/* 小圆点 */
		nav{
			width: 100px;
			height: 20px;
			margin: 0 auto;
		}
		nav span{
			width: 7px;
			height: 7px;
			display: inline-block;
			border-radius: 3.5px;
			background: #708090;
			cursor: pointer;
		}
		/* 小圆点选中样式 */
		nav span.select{
			width: 13px;
			background: #fff;
		}

         /* 左右键样式 */
        .btn{
			position: absolute;
			width: 50px;
			height: 50px;
			background:rgba(0,0,0,0.5) ;
			top: 100px;
			color: #fff;
			font-size: 30px;
			line-height: 50px;
			text-align: center;
			display: none;
		}
		.back{
			left: 100px;
		}
		 .next{
			right: 100px;
		}

html

	<div class="box" id="box">
		<ul class="imgbox" id="imgbox">
			<li class="img2" ><img src="../img/haibao1.jpg" alt=""></li>
			<li class="img1"><img src="../img/haibao2.jpg" alt=""></li>
			<li class="img3"><img src="../img/haibao3.jpg" alt=""></li>
		</ul>
		<!-- 左键右键 -->
		<span class="back btn" id="back">&lt;</span>
		<span class="next btn" id="next">&gt;</span>
		
		<!-- 小圆点 -->
		<nav id='nav'>
			<span class="select"></span>
			<span></span>
			<span></span>
		</nav>
		
	</div>

JS

	var box = document.getElementById('box')  //获取大盒子
	var imgbox = document.getElementById('imgbox')  //获取图片盒子
	var img = imgbox.children //获取3张图片
	var back = document.getElementById('back') //获取左右键 
	var next = document.getElementById('next') //获取左右键
    var navspan = document.getElementById('nav').children  //获取小圆点
	
	var num = 1 //默认第一个小圆点亮起,用户控制哪一个小圆点亮起
	var onOff = true //开关,当前是否能点击,防止点击过快的bug
	var timer = null //定义定器
	var classarr = ['img2','img1','img3']  //三种图片样式
	
	//鼠标悬停图片层显示左右按钮
	box.onmouseover = function (){
		back.style.display = 'block'
		next.style.display = 'block'
		clearInterval(timer) //取消定时器  停止自动切换
	}
	//鼠标离开图片层隐藏左右按钮
	box.onmouseout = function (){
		back.style.display = 'none'
		next.style.display = 'none'
		timer = setInterval(nextImg,3000)  //重新开启定时器,自动切换
	}
	
	// 下一张按钮点击
	next.onclick = function (){
		if(onOff){
			onOff = false; //此时不可再次切换图片
			nextImg()      //调用切换下一张的函数
			setTimeout(function(){
			    onOff = true
			},500)        //0.5s后可以再次切换,0.5s与动画时间一致
		}

	}
	// 上一张按钮点击
	back.onclick = function (){
		if(onOff){
			if(num >1){    
			   num--
		    }else{
			   num = 3
		    }
			onOff = false;
		    removenav(navspan[num-1])
			var lastValue = classarr.pop();  //取数组最后的元素
			classarr.unshift(lastValue);     //添加到数组头部
			//for循环遍历每一个li，逐个替换class
			for(var i = 0 ; i < classarr.length; i++){
				img[i].className = classarr[i];
			};
			setTimeout(function(){
			    onOff = true
			},500)
		}

	}
	// 自动下一张
	timer = setInterval(nextImg,2500)	
	
	// 切换下一张函数
	function nextImg(){
		if(num <3){
			num++
		}else{
			num = 1
		}
		removenav(navspan[num-1]) //改变圆点样式
		var fistValue = classarr.shift(); //取数组第一个值
		classarr.push(fistValue); //添加到数组最后
		 //for循环遍历每一个li，逐个替换class
		for(var i = 0 ; i < classarr.length; i++){
		    img[i].className = classarr[i];
		};
	}
	
	//修改圆点样式函数
	function removenav(obj){ //修改圆点样式
		for(var i = 0;i < navspan.length; i++){
			navspan[i].className = ''  //清除所有圆点样式
		}
		obj.className = 'select'
	}

遇到的问题：
鼠标点击过快bug，因为切换动画时间是0.5s，此时应该是不可切换状态，等0.5s动画执行完毕方可再次点击。所以要定义一个开关，每一次执行改变开关状态，0.5s之后恢复开关初始值。