輪播圖案例

時間 2019-11-13
標籤案例简体版
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖4</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box {
            overflow: hidden;
            position: relative;
        }
        img {
            width: 640px;
            height: 400px;

        }
        ol {
            width: 30000px;
            position: absolute;
        }
        ol li{
            float: left;
        }
        .box{
            width: 640px;
            height: 400px;
            border: orange 2px solid;
        }
        #btn{

            position:absolute;
            right: 10px;
            bottom: 10px;
        }
        #btn li {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: white;
            display: inline-block;
            border: 1px solid deepskyblue;
            margin-right: 5px;
            cursor: pointer;
        }
        .foc{
            background-color: coral;
        }
        .arr {
            width: 640px;
            height: 400px;
            position: absolute;
            top: 0;
            /*display: block;*/
        }
        .arr span {
            width: 50px;
            height: 80px;
            background-color: rgba(255,255,255,0.3);
            color: #E2D762;
            position: absolute;
            top: 50%;
            margin-top: -40px;
            line-height: 80px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            z-index: 65151;
            cursor: pointer;
            border-radius: 0 8px 8px 0;
        }
        #right{
            right: 0;
            border-radius: 8px 0 0  8px;

        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class = "arr">
        <span id = "left"> < </span>
        <span id= "right"> > </span>
    </div>
    <ol class = "pic">
        <li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="../images/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="../images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="../images/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="../images/5.jpg" alt=""></a></li>
    </ol>
    <ul id="btn">
        <!--這裏放小按鈕-->
    </ul>

</div>

<script>
    var box = document.getElementById("box");
    var pic = document.getElementsByClassName("pic")[0];
    var imgW = document.getElementsByTagName("img")[0].width;
    var list = pic.children;
    var btn = document.getElementById("btn");
    var arr = document.getElementsByClassName("arr")[0];
    var left = arr.firstElementChild;
    var right  = arr.lastElementChild;
    //引入移動的函數
    function move(element,target){
        clearInterval(timeId);    //解決隱藏的BUG，每次點擊先清理定時器再建立定時器，解決屢次點擊時運動變快的BUG
        var current = element.offsetLeft;
        var timeId = setInterval(function(){
            if (current != target) {
                var temp = 9;    //設置每次走的距離    這句代碼放進計時器中才能實現往回走，即current>target的狀況。由於這種狀況每次計時都要設置temp = -10,不放進來的話temp會10，-10來回變，致使盒子抖動不能到達目標地
                temp = current <= target ? temp : -temp;    //根據當前和目標的關係肯定往哪走
                if (Math.abs(current-target) > Math.abs(temp)) {    //當前距離大於每次走得距離則繼續走
                    current += temp;
                    element.style.left = current + "px";
                } else {        //當前距離小於等於每次走得距離：則直接跳到目標位置,而且清理定時器
                    element.style.left = target + "px";
                    clearInterval(timeId);
                }
            }

        },1);
    }

    //創造小按鈕
    for (var i = 0; i < list.length; i++) {
        var li = document.createElement("li");
        btn.appendChild(li);
        li.innerText = i+1;
        li.setAttribute("index",i);//設置一個自定義屬性
        btn.firstElementChild.className = "foc";//設置初始第一個按鈕的樣式

        //創造的同時註冊鼠標進入事件
        var index = 0;  //全局變量
        li.onmouseover = function () {
            for (var j = 0; j < btn.children.length; j++) {
                btn.children[j].className = "";//清除全部按鈕的樣式
                this.className = "foc"; //設置當前按鈕的樣式
            }
            index = this.getAttribute("index");
            move(pic, -index*imgW);
        };
    }


    //製做左右點擊的部分
    //設置鼠標進入離開
    box.onmouseover = function(){
        arr.style.display = "block";
    };
    box.addEventListener("mouseout",function(){
        arr.style.display = "none";
    },false)

    pic.appendChild(list[0].cloneNode(true));//克隆第一個圖放到最後
    //設置 鼠標點擊事件
    right.onclick = rightMove;

    function rightMove(){

         console.log(index);

        //設置圖片的運動
        if(index == list.length-1){ //當到達克隆的那一張再點擊時，
            index = 0;  //索引復原
            pic.style.left = 0+"px";//當即跳到第一張
        }

            index ++; //將索引加一即下一個小按鈕對應的索引。這裏調用了上個函數內的變量，必須將這個變量設置爲全局變量才能獲得
            move(pic, -index*imgW);//這兩句放在if的外面，每次點擊都會作的事

        //設置小按鈕的樣式變化
        if(index == list.length-1 ){    //當到達克隆的圖時，應該把第一個小按鈕設置上
            for (var j = 0; j < btn.children.length; j++) {
                btn.children[j].className = "";//清除全部按鈕的樣式
                btn.children[0].className = "foc"; //設置第一個按鈕的樣式
            }
        }else{
            for (var j = 0; j < btn.children.length; j++) {
                btn.children[j].className = "";//清除全部按鈕的樣式
                btn.children[index].className = "foc"; //設置當前按鈕的樣式
            }
        }
       // 特別注意：因爲小按鈕個數和圖片個數不一樣，致使利用索引設置小按鈕樣式時會出現BUG，
        // 即索引值加到length-1時已經沒法設置這個對應的小按鈕（這個小按鈕不存在）因此設置按鈕樣式的代碼和設置圖片移動的代碼應分開
        //克隆的加入，最後一張僞圖的加入致使這裏很繞，索引值與圖片的對應關係變化，索引值與小按鈕的對應變化應注意
    };
    left.onclick = function () {
        console.log(index);
        if(index == 0){ //在第一張時點擊
            index = list.length-1;  //索引到最大
            pic.style.left = -index*imgW+"px";//當即跳到clone的那張圖
        }
        index --;
        move(pic, -index*imgW);

            for (var j = 0; j < btn.children.length; j++) {
                btn.children[j].className = "";//清除全部按鈕的樣式
            }
            btn.children[index].className = "foc"; //設置當前按鈕的樣式，這句放在for外面更好，只執行一次，放在for裏會執行屢次
        //這裏的按鈕樣式設置不須要考慮特殊狀況，由於這裏的索引會--，索引與按鈕會對應，而上面索引++時要考慮索引大於按鈕的狀況
    };

    //設置自動輪播
    //思路：利用定時器每隔一段時間執行一次點擊有點按鈕的事件


</script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。