原生js匀速轮播

要求：使用html+css+js实现轮播效果。

实现效果包括：打开页面自动轮播，鼠标置于轮播框内轮播暂停并显示上翻和下翻箭头。点击箭头可上翻或下翻，鼠标置于导航下标处会自动轮播到该页。

效果图：

原理： 整个轮播图看成一个box，在box里面有水平放置着几张图片（注：图片放在ul的li标签内）。将要显示的元素放在box内，超出box的元素隐藏。轮播的过程就是将并排的图片移动的过程，如下图：现在显示的是img2，如果要显示img3，只需将放图片的ul向左移动一个图片的距离。

html实现：

<div id="box" class="box">
    <ul>
        <li><a href="#"><img src="../img/slider-1.jpg" alt="" /></a></li>
	<li><a href="#"><img src="../img/slider-2.jpg" alt="" /></a></li>
	<li><a href="#"