轮播图

//js的部分

//获取最外面的div
var box=myTab("box");
//获取相框
var photo=box.children[0];
//获取相框的宽度
var imgWidth=photo.offsetWidth;
//获取ul
var ul=photo.children[0];
//获取ul中所有的li
var li=ul.children;
//获取ol
var ol=photo.children[1];
//焦点的div
var arr=myTab("arr");
//纪录索引
var index=0;
//1创建小按钮---根据Ul中Li的个数
for(var i=0;i<li.length;i++){
    var lis=document.createElement("li");
    ol.appendChild(lis);
    lis.innerHTML=i+1;
    lis.setAttribute("index",i);
    //注册鼠标进入事件
    lis.onmouseover=function () {
      //先移出所有的背景色
        for(var j=0;j<ol.children.length;j++){
            ol.children[j].removeAttribute("class");
        }
        //设置当前的li的背景颜色
        this.className="current";
        //获取鼠标进入Li的当前索引
        index=this.getAttribute("index");
        //调用动画
        animate(ul,-index*imgWidth);
    }
}

//设置ol中第一个Li的背景色
ol.children[0].className="current";


//克隆ul中第一个Li,追加到ul的最后

ul.appendChild(ul.children[0].cloneNode(true)) ;
//2自动播放
var timeId=setInterval(move,1000);
//3鼠标移入显示焦点左右的div，并且清除定时器
box.οnmοuseοver=function () {
arr.style.display=“block”;
clearInterval(timeId);

}
//鼠标移出隐藏焦点左右的div，并且开启定时器
box.onmouseout=function () {
    arr.style.display="none";
    timeId=setInterval(timeId);

}
//点击右边按钮
myTab("right").onclick=move;
//点击左边按钮
myTab("left").onclick=function () {
    if(index==0){
        index=li.length-1;
        ul.style.left=-index*imgWidth+"px";
    }
    index--;
    animate(ul,-index*imgWidth);
    //先清除所有的小圆点样式
    for(var i=0;i<ol.children.length;i++){
        ol.children[i].removeAttribute("class");

    }
    //设置对应的按钮颜色
    ol.children[index].className="current";
}


//封装自动播放的函数
function move() {
    if(index==li.length-1){
    //瞬间跳转到第一张图
        ul.style.left=index+"px";
        index=0;
    }
    index++;
    animate(ul,-index*imgWidth);

//判断按钮的背景颜色，如果index等于最后一个的时候，那就瞬间设置第一个按钮颜色
if(index==li.length-1){
//设置第一个的按钮颜色
ol.children[0].className=“current”;
//清除最后一个按钮的颜色
ol.children[ol.children.length-1].className="";
}else {
//更改小按钮的样式
for(var i=0;i<ol.children.length;i++){
ol.children[i].removeAttribute(“class”);
}
//设置对应的li的背景颜色
ol.children[index].className=“current”;
}

}

function animate(ele,target) {
//先清理定时器
clearInterval(ele.timeId);
//ele.timeId 定时器的Id
ele.timeId = setInterval(function () {
//获取当前的位置
var current = ele.offsetLeft;
//设置div每次移动多少px
var st = 9;
//判断向左移还是右移动
st = current < target ? 10 : -10;
//每次移动后的距离
current += st;
//判断移动后的位置是否到达目标位置
if (Math.abs(target - current) > Math.abs(st)) {
//设置div的left值
ele.style.left = current + “px”;

    } else {
        //清除定时器
        clearInterval(ele.timeId);
        //将目标位置设置为div的值
        ele.style.left = target + "px";
    }

}, 10);

}