js之攻克轮播图

一条条的看很好理解， 但是凑到一起是真的难理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
        list-style: none;
        border: 0;
    }

    .all {
        width: 500px;
        height: 200px;
        padding: 7px;
        border: 1px solid #ccc;
        margin: 100px auto;
        position: relative;
    }

    .screen {
        width: 500px;
        height: 200px;
        overflow: hidden;
        position: relative;
    }

    .screen li {
        width: 500px;
        height: 200px;
        overflow: hidden;
        float: left;
    }

    .screen ul {
        position: absolute;
        left: 0;
        top: 0px;
        width: 3000px;
    }

    .all ol {
        position: absolute;
        right: 10px;
        bottom: 10px;
        line-height: 20px;
        text-align: center;
    }

    .all ol li {
        float: left;
        width: 20px;
        height: 20px;
        background: #fff;
        border: 1px solid #ccc;
        margin-left: 10px;
        cursor: pointer;
    }

    .all ol li.current {
        background: #DB192A;
    }

    #arr {
        display: none;
    }

    #arr span {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 5px;
        top: 50%;
        margin-top: -20px;
        background: #000;
        cursor: pointer;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-family: '黑体';
        font-size: 30px;
        color: #fff;
        opacity: 0.3;
        border: 1px solid #fff;
    }

    #arr #right {
        right: 5px;
        left: auto;
    }
</style>

</head>
<body>
<div class="all" id='box'>
<div class="screen"><!--相框-->
    <ul>
        <li>
            <img src="images/1.jpg" width="500" height="200"/>
        </li>
        <li>
            <img src="images/2.jpg" width="500" height="200"/>
        </li>
        <li>
            <img src="images/3.jpg" width="500" height="200"/>
        </li>
        <li>
            <img src="images/4.jpg" width="500" height="200"/>
        </li>
        <li>
            <img src="images/5.jpg" width="500" height="200"/>
        </li>
    </ul>
    <!--小圆点-->
    <ol></ol>
</div>
<!--左右按钮-->
<div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="common.js"></script>


<script>
//获取大盒子
var box=my$("box");
//获取相框
var photo=box.children[0];
//获取相框宽度
var imgWidth=photo.offsetWidth;
//获取相框里的ul
var ulObj=photo.children[0];
//获取ul里所有的li
var list=ulObj.children;
//获取ol
var olObj=photo.children[1];
//记录索引
var index=0;

//创建小圆点--根据ul中li的个数
for (var i=0;i<list.length;i++){
    var liObj=document.createElement("li");
    olObj.appendChild(liObj);
    liObj.innerHTML=i+1;

    //创建一个属性 并赋值,
    // 为了使小圆点与背景轮播图联系 ,
    liObj.setAttribute("index",i);


    //给小圆点鼠标聚焦事件
    liObj.onmouseover=function () {
        //当鼠标指向的索引小于索引的的长度时, 先清除所有样式
        for (var j=0;j<olObj.children.length;j++){
            olObj.children[j].removeAttribute("class");
        }
        //然后 在赋予指向的索引 样式
        this.className="current";

        //小圆点与背景轮播图的联系
        index=this.getAttribute("index");
        //给鼠标进入li的当前索引值, 动态画面
        animate(ulObj,-index*imgWidth);
    }
}

//背景轮播图 定时自动播放
var timeId=setInterval(move,1000);

//优化:设置ol 中第一个li 的背景颜色
olObj.children[0].className="current";
//克隆第一个li,追加到最后
ulObj.appendChild(ulObj.children[0].cloneNode(true));

//封装自动播放函数
function move(){
    //背景轮播图 自动播放
    if (index==list.length-1){
        index=0;
        ulObj.style.left=0+"px";
    }
    index++;
    animate(ulObj,-index*imgWidth);

    //轮播图与小圆点的联系
    //判断小圆点的背景颜色, 如果index=最后一个值的时候,瞬间设置第一个按钮的背景颜色
    if (index==list.length-1){
        olObj.children[0].className="current";
        //清除最后一个按钮的背景颜色
        olObj.children[olObj.children.length-1].className="";
    } else{
        //如果当前索引值不是最后一个,清除所有所有小圆点的背景颜色
        for (var i=0;i<olObj.children.length;i++){
            olObj.children[i].removeAttribute("class");
        }
        //并给鼠标指向对应的li  设置联系与背景
        olObj.children[index].className="current";
    }

}

//左右按钮的显示与隐藏
//鼠标移入显示焦点左右的按钮   清除自动播放定时器
box.onmouseover=function () {
    my$("arr").style.display="block";
    clearInterval(timeId);
}
box.onmouseout=function () {
    my$("arr").style.display="none";
    timeId=setInterval(move,1000);
}

//右边按钮的点击事件  //跟轮播和小圆点事件一样, 直接套用封装函数
my$("right").onclick=move;
//左边按钮的点击事件
my$("left").onclick=function () {
    if (index==0){
        index=5;
        ulObj.style.left=-index*imgWidth+"px";
    }
    index --;
    animate(ulObj,-index*imgWidth);

    //左右按钮与小圆点的联系
    for (var i=0;i<olObj.children.length;i++){
        //如果i 小于 索引长度 清除小圆点样式
        olObj.children[i].removeAttribute("class");
    }
    olObj.children[index].className="current";
}




</script>

</body>
</html>
不懂代码的小石

js之 攻克轮播图
