技術文章 » 原生JS簡易輪播圖

原生JS簡易輪播圖

2020-10-25 13:00:33

輪播圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .slider{
            width: 1130px;
            height: 286px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        .slider_img{
            width: 1130px;
            height: 286px;
        }
        .slider li{
            position: absolute;
            top: 0;
            left: 0;
            width: 1130px;
            height: 286px;
        }
        .slider li img{
            width: 100%;
            height: 100%;
        }
        .slider_btn{
            text-align: center;
        }
        .slider_btn .prev{
            background: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/left_arrow.svg?v=2);
            width: 52px;
            height: 52px;
            position: absolute;
            z-index: 100;
            top: 50%;
            margin-top: -26px;
            left: 10px;
            cursor: pointer;
        }
        .slider_btn .next{
            background: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/right_arrow.svg?v=2);
            width: 52px;
            height: 52px;
            position: absolute;
            z-index: 100;
            top: 50%;
            margin-top: -26px;
            right: 10px;
            cursor: pointer;
        }
        .xbtn{
            position: absolute;
            top: 93%;
            left: 50%;
            transform:translate(-50%,-50%);
        }
        .dot{
            display: inline-block;
            width: 15px;
            height: 15px;
            border: 1px solid yellow;
            border-radius: 50%;
            margin: 0 20px ;
            box-shadow: 0 0 5px black;
            cursor: pointer;
        }
        .dot_color{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="slider">
        <div class="slider_img">
            <ul>
                <li><a href="#"><img src="https://s3.ap-northeast-1.wasabisys.com/img.tw511.com/202010/01d6405f59b89111013e3187e86597aphv4ws4bci.jpg@1380w" alt=""></a></li>
                <li><a href="#"><img src="https://s3.ap-northeast-1.wasabisys.com/img.tw511.com/202010/0102135f5c387111013e3187f5cafcfulc0ods0ep.jpg@1380w" alt=""></a></li>
                <li><a href="#"><img src="https://s3.ap-northeast-1.wasabisys.com/img.tw511.com/202010/018a0a5f5c31f811013e3187ce23a555ryw35ivtg.jpg@1380w" alt=""></a></li>
                <li><a href="#"><img src="https://s3.ap-northeast-1.wasabisys.com/img.tw511.com/202010/01a6c05f599e5611013f1a647af2fck23h54puq1y.jpg@1380w" alt=""></a></li>
                <li><a href="#"><img src="https://s3.ap-northeast-1.wasabisys.com/img.tw511.com/202010/015e555f5c394711013f1a64a7ea3f5grzak1gd1t.jpg@1380w" alt=""></a></li>
                <li><a href="#"><img src="https://s3.ap-northeast-1.wasabisys.com/img.tw511.com/202010/01a2545f59b87e11013f1a645c4e0113j2o2jip3q.jpg@1380w" alt=""></a></li>
                <li><a href="#"><img src="https://s3.ap-northeast-1.wasabisys.com/img.tw511.com/202010/0160515f59b8f311013f1a649a62bc1doifg2dm5h.jpg@1380w" alt=""></a></li>
            </ul>
        </div>
        <div class="slider_btn">
            <span class="prev"></span>
            <span class="next"></span>
            <div class="xbtn">

            </div>
        </div>
    </div>
</body>
<script>

    /*
        需求分析：
            1 根據圖片的數量自動生成小圓點(類名：dot)
            2 點亮第一個小圓點(當前小圓點:dot_color)
            3 顯示第一個圖片(li),其他裡都放到右邊(左邊left:-容器寬度,右邊left:容器寬度)
            4 點選小圓點顯示相應的圖片
            5 點選prev箭頭,顯示上一張
            6 點選next箭頭,顯示下一張
            7 輪播圖會自動輪播
            8 滑鼠移入slider盒子,停止輪播,滑鼠移出slider盒子,繼續輪播
    */

    //獲取相關元素
    var slider = $id('.slider');//輪播圖容器
    var WIDTH = slider.offsetWidth;//容器/圖片的寬度
    var ImgArr = slider.children[0].children[0].children;//所有圖片所在li的集合
    // console.log(ImgArr)
    var xbtn = $id('.xbtn')
    var slider_btn = slider.children[1];//輪播圖控制按鈕存放容器
    var prev_btn = $id('.prev');//上一張按鈕
    var next_btn = $id('.next')
    var index = 0;//index是一個全域性變數，記錄當前顯示的圖片的索引

    for(var i=0 ; i<ImgArr.length ; i++){
        //建立小按鈕節點
        var span = document.createElement('span');
        //給小按鈕新增類名
        span.className = "dot";
        // span.innerHTML = i;
        span.index = i;//為了後期點選span的時候能夠知道他是第幾個
        //希望把span插入到xbtn的子元素
        xbtn.appendChild(span);


        //3 其他li都放到右邊(左邊left:-WIDTH,右邊left：WIDTHpx)
        ImgArr[i].style.left = WIDTH + 'px';
    }
    
    //2 點亮第一個小圓點(當前小圓點：dot_color)
    var spanArr = xbtn.children;
    spanArr[index].className = "dot dot_color";
    //3 顯示第一個li
    ImgArr[index].style.left = 0;

    //4 把小圓點，作用箭頭的事件都委託給父元素slider_btn
    slider_btn.onclick = function(e){
        e = e||window.event;
        var target = e.target||e.srcElement;
        if(target.className=="prev"){
            console.log("你點選了上一張按鈕");
            //如果當前圖片索引是index,那麼現在要看的索引是newIndex
            var newIndex = index-1;
            //如果newIndex<0,就是想看最後一張
            if(newIndex<0){
                newIndex = ImgArr.length-1;
            }
            //那麼我要看的圖一定在左邊
            ImgArr[newIndex].style.left = -WIDTH + "px"
            //原來索引是index的圖去右邊
            animate(ImgArr[index],{left:WIDTH})
            //現在索引newIndex的圖去中間
            animate(ImgArr[newIndex],{left:0});
            //更新最新的索引
            index = newIndex;
            //點亮小圓點
            light();
        }else if(target.className=="next"){
            console.log("你點選了下一張按鈕")
            nextImg();
        }else if(target.className.indexOf("dot")>-1){
            console.log("你點選了小圓點,點選的小圓點的索引是"+target.index);
            //你要看的索引是newIndex
            var newIndex = target.index;
            //如果要看到索引newIndex>index,索引newIndex必須在右邊
            if(newIndex>index){
                //索引是newIndex的圖片必須在右邊
                ImgArr[newIndex].style.left = WIDTH + "px";
                //原來索引是index的圖去左邊
                animate(ImgArr[index],{left:-WIDTH})
                //現在的索引是newIndex的圖去中間
                animate(ImgArr[newIndex],{left:0})
            }
            //如果要看的索引newIndex<index,索引newIndex必須在左邊
            else if(newIndex<index){
                //索引是newIndex的圖片必須在左邊
                ImgArr[newIndex].style.left = -WIDTH + "px"
                //原來索引是index的去右邊
                animate(ImgArr[index],{left:WIDTH})
                //現在索引是newIndex的去中間
                animate(ImgArr[newIndex],{left:0})
            }
            //不管是newIndex<index還是newIndex>index,運動完以後都要更新索引index,並點亮小圓點
            index = newIndex;
            light();
        }
    }

    // 7 輪播圖會自動輪播
    var timer = setInterval(nextImg,2000);
    document.onvisibilitychange = function(){
        if(document.visibilityState=="hidden"){
            clearInterval(timer)
        }
        if(document.visibilityState=="visible"){
            timer = setInterval(nextImg,2000);
        }
    }
    //8 滑鼠移入slider盒子,停止輪播，滑鼠移出slider盒子，繼續輪播
    slider.onmouseenter = function(){
        clearInterval(timer);
    }
    slider.onmouseleave = function(){
        clearInterval(timer);
        timer = setInterval(nextImg,3000)
    }

    //點亮小圓點
    function light(){
        for(var i=0 ; i<ImgArr.length ;i++){
            //圖片有幾個，小圓點就有幾個
            spanArr[i].className = "dot"
        }
        spanArr[index].className = "dot dot_color"
    }
    //顯示下一張
    function nextImg(){
        //如果當前圖片索引是index,那麼現在要看的索引是newIndex
        var newIndex = +index + 1;//在這一個字串前面寫加號表示正號
        //如果newIndex>ImgArr.length-1
        if(newIndex>ImgArr.length-1){
            newIndex = 0;
        }
        //那麼我要看的圖一定在右邊
        ImgArr[newIndex].style.left = WIDTH + "px";
        //原來索引index的圖片去左邊
        //現在索引newIndex的圖片去中間
        animate(ImgArr[index],{left:-WIDTH})
        animate(ImgArr[newIndex],{left:0})
        //更新當前索引index
        index = newIndex;
        //點亮小圓點
        light();
    }
    //獲取元素
    function $id(id){
    return document.querySelector(id)
}
function $ids(id){
    return document.querySelectorAll(id)
}
//獲取指定dom的指定樣式值 dom：元素 ， attr：要獲取的屬性
function getStyle(dom,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(dom,null)[attr];
    }else{
        return dom.currentStyle[attr]
    }
}
/* 
    animate:讓指定元素的多屬性同時緩動到指定目標
        ==>引數1：dom 要緩動的元素節點
        ==>引數2：json 動畫屬性:屬性值的目標值
            {
                width:400,
                height:500,
                left:100,
                top:300,
            }
        ==>引數3：fn 動畫完成以後執行的函數
*/
function animate(dom,json,fn){
    clearInterval(dom.timer)
    //每隔一段時間,json裡面的每個屬性都變化一點
    dom.timer = setInterval(function(){
        //每次運動開始
        var flag = true; //如果後面有哪個屬性值沒有達到目標屬性值,就把flag變成false
        //json裡面有幾個鍵值對,就要運動幾次
        for(var attr in json){
            //1 獲取當前位置
            if(attr == "opacity"){
                var current = parseInt(getStyle(dom,attr)*100)
            }else{
                var current = parseInt(getStyle(dom,attr))
            }

            //2 計算速度
            var target = parseInt(json[attr]);
            var speed = target>current?Math.ceil((target-current)/10):Math.floor((target-current)/10)

            //3 計算下一次位置
            if(attr == "zIndex"){
                var next = target;//如果緩動的屬性是zIndex，直接一步到位,不用緩動
            }else{
                var next = current + speed;
            }

            //4 定位元素
            if(attr == "opacity"){
                dom.style.opacity = next/100;
                dom.style.filter = "alpha(opacity="+next+")"
            }else if(attr == "zIndex"){
                dom.style.zIndex = next;
            }else{
                dom.style[attr] = next + "px";
            }
            if(next != target){
                flag = false;
            }
        }
        //本次運動結束,檢查flag的值
        if(flag){
            clearInterval(dom.timer);
            if(fn){
                fn()
            }
        }
    },1000/60)
}
</script>
</html>