自定義輪播圖以及bug優化

時間 2019-11-12

標籤自定義以及 bug 優化简体版

原文原文鏈接

1、源碼javascript

<!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>

2、common.jshtml

/*根據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);
}

3、圖片java

　　第一張圖片：c++