原生js匀速轮播

要求：使用html+css+js实现轮播效果。

实现效果包括：打开页面自动轮播，鼠标置于轮播框内轮播暂停并显示上翻和下翻箭头。点击箭头可上翻或下翻，鼠标置于导航下标处会自动轮播到该页。

效果图：

原理： 整个轮播图看成一个box，在box里面有水平放置着几张图片（注：图片放在ul的li标签内）。将要显示的元素放在box内，超出box的元素隐藏。轮播的过程就是将并排的图片移动的过程，如下图：现在显示的是img2，如果要显示img3，只需将放图片的ul向左移动一个图片的距离。

html实现：

<div id="box" class="box">
    <ul>
        <li><a href="#"><img src="../img/slider-1.jpg" alt="" /></a></li>
	<li><a href="#"><img src="../img/slider-2.jpg" alt="" /></a></li>
	<li><a href="#"><img src="../img/slider-3.jpg" alt="" /></a></li>
	<li><a href="#"><img src="../img/slider-4.jpg" alt="" /></a></li>
    </ul>
    <ol>
    </ol>
    <div id="div_btn">
        <span id="left" class="span_btn">&lt;</span>
        <span id="right" class="span_btn">&gt;</span>
    </div>
</div>

解释：ul内放的是轮播的图片。ol内会根据放入图片的数量动态生成导航的下标 。将左右箭头放在一个div内是在显示和隐藏时比较方便。

css实现：

body,*{
	margin: 0;
	padding: 0;
	border: 0;
}
a{
	color: #000000;
}
li{
	list-style: none;
}

li{
	float: left;
}

.box{
	width: 800px;
	height: 400px;
	margin: 100px auto;
	border: 1px black solid;
	position: relative;
	overflow: hidden;
}

	.box ul{
		width: 1000%;
		height: 100%;
		position: absolute;
	}
		.box ul li img{
			width: 800px;
			height: 400px;
		}
		
	.box ol{
		position: absolute;
		bottom: 10px;
		right: 5px;
		z-index: 10;
	}
		.box ol li{
			width: 20px;
			height: 20px;
			border-radius: 10px;
			background: #FFFFFF;
			color: #000000;
			text-align: center;
			margin-right: 10px;
			cursor: pointer;
		}
		.box ol li.current{
			background: #FF0000;
		}
	#div_btn{
		display: none;
	}
	.span_btn{
		width: 50px;
		height: 60px;
		color: #FFFFFF;
		top: 170px;
		position: absolute;
		z-index: 10;
		font-size: 30px;
		text-align: center;
		line-height: 60px;
		background: rgba(255,255,255,0.3);
		cursor: pointer;
	}
	#left{
		left: 10px;
	}
	#right{
		right: 10px;
	}

解释：css主要是将图片水平排列，并通过box显示一张图片其余图片通过overflow:hidden;隐藏。将左右箭头和以后动态创建的ol内的li元素通过绝对定位 position:absolute;进行排布，不要忘记设置z-index。 

注意：需要将box和ul的position设置为relative。

 js实现：

自定义函数

/**
 * 	自定义动画移动
 * @param {Object} element 元素
 * @param {Number} step 步长
 * @param {Number} space 速度
 * @param {Number} target 目标
 * 
 */
function animate_move(element,step,space,target){
	//可优化
	clearInterval(element.setId);
	element.setId = setInterval(function(){
		let current = element.offsetLeft;
		let myStep = current<target?step:-step;
		current += myStep;
		if(Math.abs(target - current) > step ){
			element.style.left = current +"px";
		}else{
			element.style.left = target +"px";
			clearInterval(element.setId);
		}
	},space)
}

/**
 * 将parent内的孩子的class清除 并给element元素添加className
 * @param {Object} parent
 * @param {String} myClassName
 * @param {Object} element
 */
function showClass(parent,myClassName,element){
	let childen = parent.children;
	for(let i=0;i<childen.length;i++){
		childen[i].removeAttribute("class");
	}
	element.className = myClassName;
}

 

//拿到相关控件
let box = document.getElementById("box");
let left_btn = document.getElementById("left");
let right_btn = document.getElementById("right");
let div_btn = document.getElementById("div_btn");
let box_ul = box.children[0];
let box_ol = box.children[1];
let ul_lis = box_ul.children;

定义一些变量

//图片宽
let width_img = box.clientWidth;

//建立索引 移动速度  移动步长  className 自动播放
let allIndex = 0;
let space = 20;
let step = 10;
let myClassName = "current";
let playTime = null;

 

//根据图片完善结构
for(let i=0;i<ul_lis.length;i++){
	let ol_li = document.createElement("li");
	ol_li.setAttribute("index",i);
	ol_li.innerHTML = i+1;
	box_ol.appendChild(ol_li);
	
	//鼠标进入
	ol_li.onmouseover = function() {
		showClass(box_ol,myClassName,this);
		allIndex = this.getAttribute("index");
		animate_move(box_ul,step,space,-allIndex*width_img);
	}
}
box_ol.children[0].className="current";
box_ul.appendChild(ul_lis[0].cloneNode(true));//克隆  无缝循环

解释：根据图片完善结构即：完善ol的内容。此处是根据img数量来动态创建。在创建的过程中将鼠标的进入事件分别绑定。

 box鼠标进入和离开事件

//鼠标进入box
box.onmouseover = function(){
	div_btn.style.display = "block";
	clearInterval(playTime);
}
//鼠标离开box
box.onmouseout = function(){
	div_btn.style.display = "none";
	playTime = setInterval(toright,2000);
}

 箭头的点击事件：

//点击右键
right_btn.onclick = toright;
function toright() {
	//已经是最后一张图（与第一张相同） 应下一次显示第二张
	if(allIndex == ul_lis.length-1){
		box_ul.style.left = "0px";
		allIndex = 0;
	}
	allIndex++;
	animate_move(box_ul,step,space,-allIndex*width_img);
	if(allIndex == ul_lis.length-1){
		showClass(box_ol,myClassName,box_ol.children[0]);
	}else{
		showClass(box_ol,myClassName,box_ol.children[allIndex]);
	}
	
}

//点击左键
left_btn.onclick = toleft;
function toleft() {
	//已经是第一张图（与最后一张相同） 应下一次显示倒数第二张
	if(allIndex == 0){
		allIndex = ul_lis.length-1;
		box_ul.style.left = -allIndex*width_img+"px";
	}
	allIndex--;
	animate_move(box_ul,step,space,-allIndex*width_img);
	showClass(box_ol,myClassName,box_ol.children[allIndex]);
}

//自动循环
window.onload = function(){
	playTime = setInterval(toright,2000);
}

总结：这个案例需要实现的功能比较多。可以把整体分为三个部分：鼠标置于导航上轮播到相应的页面、点击左右箭头轮播、自动轮播。此案例是匀速轮播。