琢磨了幾個小時終於寫出來了，上程式碼

這是佈局結構

<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>