无缝轮播封装

css

.out-cursoal{
width:780px;
	height:306px;
	position:relative;
	left:40px;
	border:1px solid black;
	overflow: hidden;				
}
.iner-slide{
	position:absolute;
	left:-780px;
	top:0;	
	border:1px solid red;	
	font-size: 0;		
}
.iner-img{
	width:780px;
	height:306px;
}
.bto{
	position:absolute;
	top:46%;
	padding:5px 10px;
	display: inline-block;
	background:white;
	color:black;

}
.zuo-bto{
	left:0;	
	
}
.you-bto{
	right:0;
}
.carsoal-cicle{
	position: absolute;
	z-index: 11;
	text-align:center;
	left:50%;
	bottom:20px;
	margin-left:-176px;
	
}
.carsoal-cicle li{
	float:left;
	display: inline-block;
	width:26px;
	height:26px;
	background: rgba(0,0,0,0.5);
	border-radius:50%;
	line-height:26px;
	margin-left:20px;		
}
.carsoal-cicle li.on{
	background: rgba(255,255,255,0.5);
}

div布局

<!--定位盒子-->
		<div class="out-cursoal cursoal2">
			<!--里面运动的盒子-->
			<div class="iner-slide">
				<!--内部图片-->
				<img class="iner-img" src="最后一张图片"/>
				<img class="iner-img" src="第一张图片" />
				<img class="iner-img" src="图片" />
				<img class="iner-img" src="图片" />
				<img class="iner-img" src="图片" />
				<img class="iner-img" src="最后一张图片"/>
				<img class="iner-img" src="第一张图片" />
			</div>	
			<!--左右按钮，定位-->
			<span class="bto zuo-bto"><</span>
			<span class="bto you-bto">></span>
			<!--图片上控制的按钮-->
			<ul class="carsoal-cicle">
	    			<li class="on">1</li>
	    			<li>2</li>
	    			<li>3</li>
	    			<li>4</li>
	    			<li>5</li>
	    			<li>6</li>
	    		</ul>
		</div>

js代码

<script src="js/轮播封装.js"></script>
	<script>
  // turnbox('定位盒子的');
	turnbox('.cursoal2');
	</script>
	// js/轮播封装.js的neirong
   function turnbox(box){
	//  获得两个点击按钮
	var bto =document.querySelectorAll('.bto');
	//  获取原点
	var cicle =document.querySelectorAll('.carsoal-cicle li');
	//	获取最外部的盒子
	var outcursoal =document.querySelector(box);
	//	获取照片
	var innerimg=outcursoal.querySelectorAll('.iner-img');
	//	获取移动盒子
	var inerslide=outcursoal.querySelector('.iner-slide');
	//	获取照片的宽度(offsetWidth)
	var imgwidth=innerimg[0].offsetWidth
	//	获取照片的张数
	var imglength=innerimg.length
	//	把算出来的移动盒子的宽度设置给移动盒子属性
	inerslide.style.width= imgwidth * imglength + 'px';
	//  定义轮播开始的位置
	var index=1;
	var speed=10;
	//圆点计数
	var dotIndex=0;
	//  让图片循环运动
	var autoInterval=null;
	autoAniamate();
	function autoAniamate(){
		autoInterval = setInterval(function(){
		speed=-Math.abs(speed) 	
		animate();	
	    },3000)
	}
	//让图片运动
	function animate(){
		cicledot();
		//	让内部的盒子运动起来，用定时器定义成方法
		var timer = setInterval(function(){
		 var left=inerslide.offsetLeft + speed
		 inerslide.style.left= left +'px';
		 //即将要运动的图片的下标
		 var curindex=0;
		 if(speed<0){
		 	curindex=index+1
		 }
		 else{
		 	curindex=index-1
		 }
		 if((left <=-curindex * imgwidth && speed<0 )||(left >= -curindex * imgwidth && speed>0))
		 {
            clearInterval(timer);
		 	index=curindex;		 		
		 	if(index >= imglength - 1 ){
		 	//判断最后一张的图片的位置imglength - 1 ,运动到最后一张就跳到默认第一张，index=1;		
		 	inerslide.style.left=-imgwidth+'px'
		 	index=1;
		 	}else if(index<=0){
		 		index=imglength-2;
			 	inerslide.style.left=-index*imgwidth+'px';
		 	}

		 }
		 
	},10)
}
//给原点加点击事件
for(var i=0;i<cicle.length;i++){
	cicle[i].cic=i
	cicle[i].οnclick=function(){
		if(this.cic<dotIndex){
			speed=Math.abs(speed)
			index=this.cic+2;
			dotIndex=this.cic+1
			
		}else{
			speed=-Math.abs(speed)
			index=this.cic;
			dotIndex=this.cic-1
			
		}
		animate();
	}
}
function cicledot(){
	    if(speed<0){
	    	dotIndex++
	    }else{
	    	dotIndex--
	    }
	    if(dotIndex >cicle.length-1)
	    {
	    	dotIndex=0;
	    }
	    else if(dotIndex<0)
	    {
	    	dotIndex=cicle.length-1
	    }
    	for(var i=0;i<cicle.length;i++){
    		cicle[i].classList.remove('on')
    	}
    	cicle[dotIndex].classList.add('on')
}
	//给左右按钮加点击事件
	for(var i=0;i<bto.length;i++){
		bto[i].οnclick=function(){
			var className=this.className
			if(className.indexOf('zuo-bto')>=0){
				//点击左按钮
				speed=Math.abs(speed)
				animate();
			}else{
				speed=-Math.abs(speed)
				animate();
			}
		
		}
	}
//  鼠标移入结束波动
inerslide.οnmοuseenter=function(){
	clearInterval(autoInterval);
}
//  鼠标移除继续调用方法
inerslide.οnmοuseleave=function(){
	autoAniamate();
}

//  当浏览器最小化或切换不同标签是执行的动作webkitvisibilitychange；
//	doucument.addEventListener监听事件
document.addEventListener('webkitvisibilitychange',function(){
	var isHidden=document.webkitVisibilityState;
	if(isHidden=='hidden'){
		clearInterval(autoInterval);
	}else{
		autoAniamate();
	}
});
}

最终效果,图上红色部分都可以自己修改样式，个人审美比较丑