<section class="banner-box" id="banner-box">
		<div class="banner">
			<img src="img/banner1.jpg">
			<img src="img/banner2.jpg">
			<img src="img/banner3.jpg">
			<img src="img/banner4.jpg">
			<img src="img/banner1.jpg">
		</div>
		<div class="dots" id="dots">
			<span class="active"></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</section>

/*banner*/
.banner-box{
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 9rem;
}
.banner{
	position: absolute;
	width: 193.8rem;
	overflow: hidden;
	/*transition: transform 1s;*/
}
.banner>img{
	display: block;
	float: left;
	width: 18.75rem;
	height: 9rem;
}
.dots{
	position:absolute;
	display: flex;
	justify-content:center;
	align-items: center;
	bottom: .5rem;
	width: 100%;
	height: 1rem;
	line-height: 1rem;
}
.dots>span{
	display: inline-block;
	margin:0 .1rem;
	width: .5rem;
	height: .5rem;
	background:#9aa499;
	border-radius: 50%;
	cursor: pointer;
}
.dots>span.active{
	background:#fff;
}

(function(doc){
	var bannerBox=getById("banner-box");
	var dotBox=getById("dots");
	var dots=dotBox.getElementsByTagName("span");
	var innerBox=doc.getElementsByClassName("banner")[0];
	//获取banner图片
	var img=bannerBox.getElementsByTagName("img");
	var index=0;
	var timer=null;
	//通过id获取dom元素
	function getById(id){
		return doc.getElementById(id) || id;
	}
	function slider(){
		var len=img[0].width;
		window.onresize=function(){
			len=img[0].width;
		}
		//鼠标移入事件
		bannerBox.onmouseover=function(){
			clearInterval(timer);
		}
		//鼠标移出事件
		bannerBox.onmouseout=function(){
				//设置定时器
				timer=setInterval(function(){
				//当跳到第5张图片时无动画回到第一张
				if(index==5){
					//取消动画效果
					innerBox.style.transition="";
					//还原图片到第一张
					innerBox.style.transform="translateX(0)";
					//设置索引为0
					index=0;
				}
				changeImg(len);
			},1000)
		}
		//循环所有圆点
		for(var i=0;i<dots.length;i++){
			//设置索引
			dots[i].index=i;
			//绑定圆点点击事件
			dots[i].onclick=function(){
				//获取索引
				index=this.index;
				changeImg(len);
			}
		}
	}
	//切换图片函数
	function changeImg(len){
		//圆点跟随
		if(index<4){
			for(var i=0;i<dots.length;i++){
				dots[i].className="";
			}
			dots[index].className="active";
		}else{
			for(var i=0;i<dots.length;i++){
				dots[i].className="";
			}
			dots[0].className="active";
		}
		//图片移动
		innerBox.style.transition="transform 1s";
		innerBox.style.transform="translateX(-"+len*index+"px"+")";
		index++;
	}
	slider();
})(document)

如图代码并没有达到效果，到第5张时图片会有动画的返回第1张，但是我用断点一步一步跑又是正常的，不知道哪里有问题