JS_完整版轮播图

轮播器02.gif

核心代码：

<script>
    //1. 获取对象
    function $(id) {
        return document.getElementById(id);
    }
    var box = $("box");
    var screen = box.children[0];
    var ul = box.children[0].children[0];
    var ol = box.children[0].children[1];
    var ullis = ul.children;
    var arr = $("arr");
    var screenW= screen.offsetWidth;
    var leftBtn = $("left");
    var rightBtn = $("right");
    var timer = null;

    //1.5 定时器
    timer = setInterval(playNext,1000);

    //2. 触发事件
    //2.1 触发按钮的出现
    box.onmouseover = function () {
       arr.style.display = "block";
        clearInterval(timer);
    }

    box.onmouseout = function () {
        arr.style.display = "none";
        timer = setInterval(playNext,1000);
    }

    //2.2 创建下面的小方块
    for (var i = 0; i < ullis.length; i++) {

        //2.2.1 创建li
        var li = document.createElement("li");
        li.innerHTML = i+1;
        //2.2.2 拼接
        ol.appendChild(li);
    }

    //2.2.3 点亮
    var ollis = ol.children;
    ollis[0].className = "current";

    //2.2.4 触摸点亮
    for (var i = 0; i < ollis.length; i++) {
        ollis[i].index = i;
        ollis[i].onclick = function () {

            for(var j=0; j<ollis.length; j++){

                ollis[j].className = "";
            }

            ollis[this.index].className = "current";
            console.log(this.index);
            animate(ul,-this.index*screenW);

            /// 最重要的一步:保持同步
            num = cur = this.index;
        }
    }

    //2.3 无缝连接准备,,拷贝一个li到后面
    var firstNode = ullis[0].cloneNode(true);
    ul.appendChild(firstNode);

    //2.4 点击右键无缝连接
    // 先判断 在加减
    var num = 0; // 求ulli的页数的
    var cur = 0; // 求ollis的小方块的

    rightBtn.onclick = function () {

        if (num==ullis.length-1) { //5

            num=0;
            ul.style.left = 0;
        }

        num++;
        animate(ul,-num*screenW);
        
        //小方块的 cur
        console.log(cur);
        if (cur < ollis.length-1) {// 小于4,123都可以
            cur++;
        }else{
            cur=0;
        }

        for (var i = 0; i < ollis.length; i++) {

            ollis[i].className = "";
        }

        ollis[cur].className = "current";

    }

    leftBtn.onclick = function () {

        if (num==0) { //5

            num=ullis.length-1;
            ul.style.left = -num*screenW + "px";
        }

        num--;
        animate(ul,-num*screenW);

        //小方块的 cur
        console.log(cur);
        if (cur >0) {// 小于4,123都可以
            cur--;
        }else{
            cur=ollis.length-1;
        }

        for (var i = 0; i < ollis.length; i++) {

            ollis[i].className = "";
        }

        ollis[cur].className = "current";
    }


    function playNext() {

        rightBtn.click();
    }



</script>