自定义轮播图以及bug优化

一、源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 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 ul{
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 3000px;
        }
        .screen ul li{
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .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" alt="" width="500" height="200" /></li>
                <li><img src="./images/2.jpg" alt="" width="500" height="200" /></li>
                <li><img src="./images/3.jpg" alt="" width="500" height="200" /></li>
                <li><img src="./images/4.jpg" alt="" width="500" height="200" /></li>
                <li><img src="./images/5.jpg" alt="" width="500" height="200" /></li>
            </ul>
            <ol>

            </ol>
        </div>

        <div id="arr">
            <span id="left"><</span>
            <span id="right">></span>
        </div>
    </div>

    <script src="./js/common.js"></script>
    <script>
        
        // 获取相框
        var boxObj = my$("box");
        var screenObj = boxObj.children[0];
        var imgWidth = screenObj.offsetWidth;

        var ulObj = screenObj.children[0];
        var list = ulObj.children;
        var olObj = screenObj.children[1];
        //焦点的div
        var arr = my$("arr");
        // 记录当前播放相片的小按钮的下标
        var pic = 0;

        for (let i = 0; i < list.length; i++) {
            var liObj = document.createElement("li");
            liObj.setAttribute("index",i);
            setInnerText(liObj,i+1);
            olObj.appendChild(liObj);

            liObj.onmouseover = function(){
                //先干掉所有的ol中的li的背景颜色
                for (var j = 0; j < olObj.children.length; j++) {
                    olObj.children[j].removeAttribute("class");
                }

                this.className = "current";
                pic = this.getAttribute("index");
                //移动ul
                animate(ulObj, -pic * imgWidth);
                // animate(ulObj,-pic*imgWidth);
            };

            liObj.onmouseout = function(){
                this.removeAttribute("class");
            };
        }
        // 为第一个下方块添加默认选中状态
        olObj.children[0].className = "current";

        // ---------- 设置自动播放 -------------- //
        // 克隆第一张图片添加到ulObj对象里面
        ulObj.appendChild(ulObj.children[0].cloneNode(true));
        
        var timeId = setInterval(clickHandle,1000);

        // 鼠标进入box的div显示左右焦点的div
        boxObj.onmouseover = function(){
            arr.style.display = "block";
            clearInterval(timeId);
        };

        // 鼠标离开到box的div隐藏左右焦点的div
        boxObj.onmouseout = function(){
            arr.style.display = "none";
            timeId = setInterval(clickHandle,1000);
        };

        // 右边按钮
        my$("right").onclick = clickHandle;

        // 左边按钮
        my$("left").onclick = function(){
            if(pic == 0){
                pic = 5;
                ulObj.style.left = -pic*imgWidth + "px";
            }
            pic--;
            animate(ulObj,-pic*imgWidth);

            // 去掉所有小按钮颜色
            for (let i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            // 为当前小按钮添加上颜色
            olObj.children[pic].className = "current";
        };

        // 切换下一个照片
        function clickHandle(){
            //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
            //所以,如果用户再次点击按钮,用户应该看到第二个图片
            if(pic == list.length-1){
                pic = 0;
                ulObj.style.left = 0 + "px";
            }
            pic++;
            animate(ulObj,-pic * imgWidth);

             //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
            if(pic == list.length-1){
                // 第五个按钮颜色干掉
                olObj.children[olObj.children.length-1].className = "";
                olObj.children[0].className = "current";
            }else{
                //干掉所有的小按钮的背景颜色
                for (var j = 0; j < olObj.children.length; j++) {
                    olObj.children[j].removeAttribute("class");
                }
                olObj.children[pic].className = "current";
            }
        };

       
    </script>

</body>
</html>

二、common.js

/*根据id获取元素对象*/
function my$(id){
    return document.getElementById(id);
}

/**
 * 设置任意元素的中间文本内容
 * @param {*} element 标签元素
 * @param {*} text    文本内容
 */
function setInnerText(element,text){
    if(typeof element.textContent === "undefined"){
        element.innerText = text;
    }else{
        element.textContent = text;
    }   
}

/**
 * 动画函数
 * 任意一个元素移动到指定的目标位置
 * @param {*} element 任意一个元素
 * @param {*} target  目标位置（number类型）
 */
function animate(element, target) {
    // 先清理定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        // 获取移动元素当前位置
        var current = element.offsetLeft;
        // 每次移动距离
        var step = 9;
        step = target > current ? step : -step;
        // 移动后的距离
        current +=step;
        // 判断是否到达目标位置
        if(Math.abs(target - current) > Math.abs(step)){
            element.style.left = current + "px";
        }else{
            clearInterval(element.timeId);
            element.style.left = target + "px";
        }
    }, 20);
}

三、图片

　　第一张图片：

　　第二张图片：

　　第三张图片：

　　第四张图片：

　　第五张图片：

四、效果图

自定义轮播图以及bug优化

猜你喜欢