轮播图完整（原生js）

用原生js写出无缝轮播图
实现：
1.鼠标进入下表，图片滑动到对应位置
2.按左右按钮，图片滑动到上一张或下一张图片
3.图片无缝切换，即鼠标进入到图片4的时候，再点击下一张，滑动到图片1。
核心在于，虽然看上去是4张图片，其实在js里面在第四张图片的后面加了第一张图片。
即1234=>12341
1.获取ul对象，方便移动
2.在里面新增一张图片，用cloneNode（true），克隆第一张图片并添加在最后一张图后面。
3.根据图片个数循环创建下标，要减1：用document.creatEelement()实现
4.给下标注册鼠标进入事件，定义一个全局变量yi
5.给右点击按钮注册点击事件，此时也会用到全局变量yi
图片的移动请看：添加链接描述
moveanimation（）这个自定义函数的介绍请看上面链接

    var screen = my$("box").children[0];
    var ulobj = screen.children[0];
    var list = ulobj.children;
    var ollist = screen.children[1];
    var imgwidth = screen.offsetWidth;
    var left = my$("left");
    var right = my$("right");
    console.log(imgwidth);
    //克隆
    var imgglast = list[0].cloneNode(true);
    ulobj.appendChild(imgglast);
    //创建下标
    for(var i=0;i<list.length-1;i++){
        var oli = document.createElement("li");
        oli.innerHTML = i+1;
        ollist.appendChild(oli);
    }
    console.log(ollist);
    
    my$("box").onmouseover = function(){
        my$("arr").style.display = "block";
    }
    my$("box").onmouseout = function(){
        my$("arr").style.display = "none";
    }
    ollist.children[0].className="current";
    var yi = 0;
    for(var i=0;i<ollist.children.length;i++){
        ollist.children[i].setAttribute("index",i);
        ollist.children[i].onmouseover = function(){
            yi = this.getAttribute("index");
            moveanimation(ulobj,-yi*imgwidth);
            for(var j=0;j<ollist.children.length;j++){
                ollist.children[j].className = ""
            }
            this.className = "current";
        }
    }
    right.onclick = function(){
        if(yi==list.length-1){
            yi=0;
            ulobj.style.left = "0px";
        }
        yi++;
        moveanimation(ulobj,-yi*imgwidth);   
        if(yi==list.length-1){
            ollist.children[list.length-2].className= "";
            ollist.children[0].className= "current";
        }else{
            for(var i=0;i<ollist.children.length-1;i++){
            ollist.children[i].className="";
            }
            ollist.children[yi].className= "current";
        }
        
        
    }
    left.onclick = function(){
        if(yi==0){
            yi=list.length-1;
            ulobj.style.left = -yi*imgwidth+"px";
        }
        yi--;
        moveanimation(ulobj,-yi*imgwidth); 
        for(var i=0;i<ollist.children.length;i++){
            ollist.children[i].className="";
        }
        ollist.children[yi].className= "current";
          
    }