图片轮播

此处图片轮播原理：在container元素中水平放入图片，通过overflow属性将超出部分隐藏，然后通过js控制图片组left值达到轮播效果。

实现的html结构如下图：

实现js控制动画原理如下图：

编写相应的函数之前我们应该知道

1. 我们为菜单栏加入了相应的index属性，与tab选项卡的ind属性相似，我们可以通过index找到我们想要的图片的位置
2. 我们的play函数是前面的moveStart函数和showTab函数的结合，我们通过传入的i*图片长度计算要到达的图片的位置，通过为当前元素赋予select类名改变样式
3. 值得注意的是我们这里采用了与showTab函数不同的处理方法，我们加入了一个变量select记录上一次改变样式的选项，取代了之前的遍历所有选项改变类名的方式
4. 与自动切换的tab选项卡相同，在鼠标滑过菜单事件时我们清除定时器，当滑出时我们以滑出的li的index属性为参数传入auto使其开始轮播

function auto(start){
    clearInterval(autotimer);
    var i = start;
    autotimer=setInterval(function(){
        console.log(i);
        play(i);
        i++;
        if(i == img.length)
        {
            i=0;
        }
    },3000);
}
function play(i){
    clearInterval(timer);
    var target=-i * 490;
    menu_li[select].className='';
    select=i;
    menu_li[select].className='select';
    timer=setInterval(function(){
        var speed= (target - pic.offsetLeft )/10;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        if(pic.offsetLeft == target)
        {
            clearInterval(timer);
        }
        pic.style.left=pic.offsetLeft+speed+'px';
    },20);
}