用原生JS写无缝轮播

琢磨了几个小时终于写出来了，上代码

这是布局结构

<div id="box">
<ul>
<li><a href="javascript:;"><img src="images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/3.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/4.jpg" alt=""></a></li>
</ul>
<a id="prev"><</a>
<a id="next">></a>
</div>

这是样式

<style>
body,ul,ol{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
img{
border: none;
vertical-align: middle;
}
#box{
width: 600px;
height: 300px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#box ul{
position: absolute;
left: 0;
top:0;
height: 300px;
}
#box ul li{
float: left;
width: 600px;
height: 300px;
}
#box ul li a{
display: block;
height: 300px;
}
#box ul li a img{
width: 100%;
height: 100%;
}
#prev,#next{
position: absolute;
top: 130px;
width:40px;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 30px;
font-weight: bold;
background: rgba(0,0,0,0.4);
color: #fff;
cursor: pointer;
}
#prev{
left: 0;
}
#next{
right: 0;
}

JS部分

<script>
window.onload = function(){
var oDiv = document.getElementById('box');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var num = 0;
var timer = null;

var lastChild = oUl.children[0].cloneNode(true);   //为了实现无缝，将第一张图片复制放到最后面
oUl.appendChild(lastChild);
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';


function autoPlay(){
timer = setInterval(function(){
num++;
move();
},2000);
}
autoPlay();
function move(){
if(num == aLi.length){  //当图片到最后一张的时候，将oUl的left值设为0重新开始
oUl.style.left = 0;
    num = 1;
}
else if(num == -1){
oUl.style.left = -(aLi.length-1)*aLi[0].offsetWidth + 'px';
num = aLi.length-2;
}
doMove(oUl,'left',-num*aLi[0].offsetWidth);
}
oDiv.onmouseover = function(){
clearInterval(timer);
}
oDiv.onmouseout = autoPlay;
prev.onclick = function(){
num--;
move();
}
next.onclick = function(){
num++;
move();
}
}
function doMove(obj,attr,target){   //运动函数
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target - parseInt(getStyle(obj,attr))) / 8;  //设置速度，随着图片滚动，速度越来越小
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if(parseInt(getStyle(obj,attr))== target){
clearInterval(obj.timer);
}else{
obj.style[attr] = parseInt(getStyle(obj,attr)) + speed + 'px';
}
},30);
}
function getStyle(obj,attr){ // 获取样式
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
</script>