轮播图（自己的理解 ）

HTML结构模块

<!-- 轮播板块 -->
		<div class="banner">
			<div class="banner_layout">
				<div class="title"> 三大确定性 保证服务体验 </div>
				<!-- 相当于ul -->
				<div class="banner_box"> 
				<!-- 相当于li -->
					<div class="couresel">
						<p><img src="img/pinzhi.png"></p>
						<ul class="scrollBox">
							<li>
								<img src="img/home-cal01.png">
								<img src="img/home-cal02.png">
								<img src="img/home-cal03.png">
							</li>
						</ul>
					</div>
					<div class="couresel">
						<p><img src="img/shijian.png"></p>
						<ul class="scrollBox">
							<li>
								<img src="img/calShijian01.png">
								<img src="img/calShijian02.png">
								<img src="img/calShijian03.png">
							</li>
						</ul>
					</div>
					<div class="couresel">
						<p><img src="img/pinlei.png"></p>
						<ul class="scrollBox">
							<li>
								<img src="img/calPinLei01.png">
								<img src="img/calPinLei02.png">
								<img src="img/calPinLei03.png">
							</li>
						</ul>
					</div>
					<div class="couresel">
						<p><img src="img/pinzhi.png"></p>
						<ul class="scrollBox">
							<li>
								<img src="img/home-cal01.png">
								<img src="img/home-cal02.png">
								<img src="img/home-cal03.png">
							</li>
						</ul>
					</div>
				</div>
				<!-- 左右按钮 -->
				<div class="btn_l btn">
					<img src="img/left.png" >
				</div>
				<div class="btn_r btn">
					<img src="img/right.png" >
				</div>
				<!-- 焦点 -->
				<ul class="circles">
					<!-- 需要给每个li设置一个自己的属性 -->
					<li class="active item" data-n='0' ></li>
					<li data-n='1' class='item'></li>
					<li data-n='2' class='item'></li>
				</ul>
			</div>
		</div>

JS核心代码

// 轮播图
var btnL=document.querySelector('.btn_l');
var btnR=document.querySelector('.btn_r');
var bannerBox=document.querySelector('.banner_box');
var index=0;
//-------------------------------------------------
//按钮点击轮播(右按钮)
btnR.onclick=function () {
	autoPlay ();
	setCircles();
}


//-------------------------------------------------
//按钮点击轮播(左按钮)
btnL.onclick=function () {
	index--;
	if(index==-1){//判断第一张向左的时候
		index=2;//等于倒数第二张
		bannerBox.style.left=3*-1200+'px';
	}
	var target=index*-1200;
	setCircles();
	slowMoveAnimation(bannerBox,target);
}


//-------------------------------------------------
//轮播的核心功能
	function autoPlay () {
		index++;
		if(index==4){//判断最后一张的时候
			index=1;//等于第二张
			bannerBox.style.left=0;
		}
		var target=index*-1200;
		slowMoveAnimation(bannerBox,target);
	}

//-------------------------------------------------
// 自动轮播
bannerBox.timer=setInterval(function () {
	autoPlay ();
	setCircles();
},2000)


//-------------------------------------------------
//焦点功能
var uls=document.querySelector('.circles');
var lis=document.querySelectorAll('.item');
//利用事件委托给ul添加点击事件
uls.onclick=function (e) {
	//判断是不是点击的li 因为委托点ul的空地方也会执行
	if(e.target.nodeName.toLowerCase()=='li'){
		//给所有的小原点手动的加上data-n='0'属性，用来表示第几个小原点
		var n=Number(e.target.getAttribute('data-n'));
		index=n;
		setCircles();
		var target=index*-1200;
		slowMoveAnimation(bannerBox,target);
	}
}
//定义的排他函数
function setCircles () {
	//lis是小原点li
	for(var i=0;i<lis.length;i++){
		if(i==index){
			lis[i].setAttribute('class','active');
		}else if(i==3){
			lis[0].setAttribute('class','active');
		}else{
			lis[i].removeAttribute('class');
		}
		//因为走到最后一张图片会变成小圆圈空,所以判断设置
		if(index==3){
			lis[0].setAttribute('class','active');
		}
	}
}

JS封装的动画函数

// 匀速动画的封装
var timer;
function moveAnimation (ele,target) {
	clearInterval(ele.timer);//先清除定时器
	 ele.timer=setInterval(function () {//设置定时器
		//小盒子距离大盒子的距离  和target的距离
		//x=800 target=0  向左
		//x=0  target=800  向右
		//x=target=0  ||  x=target=800  清除定时器
		var x=ele.offsetLeft;//让x等于距离大盒子的左偏移量
		if(x==target){
			clearInterval(timer);
		}else if(x>target){
			x-=10;
			ele.style.left=x+'px';
		}else if(x<target){
			x+=10;
			ele.style.left=x+'px';
		}
 	},30)
}


//缓速封装动画
var timer2;
function slowMoveAnimation (ele,target) {
	// console.log(ele);
	clearInterval(ele.timer2);
	ele.timer2=setInterval(function () {
		if(ele==target){
			clearInterval(ele.timer2);
		}else{
			var x=(target-ele.offsetLeft)/10;
			x=x>0?Math.ceil(x):Math.floor(x);
			ele.style.left=x+ele.offsetLeft+'px';
		}
	},30)
}

//上下移动的动画效果
var timer3;
function slowMoveAnimationY (ele,target) {
	// console.log(ele);
	clearInterval(ele.timer3);
	ele.timer3=setInterval(function () {
		if(ele==target){
			clearInterval(ele.timer3);
		}else{
			var x=(target-ele.offsetTop)/10;
			x=x>0?Math.ceil(x):Math.floor(x);
			ele.style.top=x+ele.offsetTop+'px';
		}
	},30)
}