js原生實現輪播

阿新 • • 發佈：2018-06-04

隱藏 asc head col count CA 依次 temp AI

　　前兩天同事面試新人，讓現場寫”輪播的實現”。我一想這玩意貌似我也沒寫過啊，就在旁邊暗搓搓地拖了一張紙也在那寫，同事都納悶了！

這玩意實現方法有很多種，就看喜歡那種，喜歡怎麽寫而已。我這裏是通過對img opacity樣式修改，達到對img顯隱的控制。img輪播到那個位置，就對該位置的img樣式進行設置，首先將上一張img樣式opacity變為0，然後將新位置img樣式opacity設置為1，從而形成輪播。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin:  
0;
            padding: 0;
        }
        .main,.scollimg,img{
            width: 1500px;
            height: 800px;
        }

        .main {
            margin: 0 auto;
            position: relative;
        }

        .main .scollimg {
            position: relative;
        }

        .main .scollimg img {
            position: absolute;
            top:  
0;
            left: 0;
        }

        .main .item {
            position: absolute;
            bottom: 30px;
            left: 70px;
            width: 200px;
            height: 16px;
        }

        .main .item span {
            width: 16px;
            height: 16px;
            background 
-color: #ffffff;
            display: inline-block;
            border-radius: 50%;
        }

        .main .item span:hover {
            cursor: pointer;
        }

        .arrow {
            position: absolute;
            top: 280px;
            z-index: 2;
            display: none;
            width: 40px;
            height: 40px;
            font-size: 36px;
            font-weight: bold;
            line-height: 39px;
            text-align: center;
            color: #ffffff;
            background-color: rgba(0, 0, 0, 0.3);
            cursor: pointer;
        }

        .arrow:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

        .main:hover .arrow {
            display: block;
        }

        #btnleft {
            left: 20px;
        }

        #btnright {
            right: 20px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="scollimg">
        <img src="img/1.jpg" >
        <img src="img/2.jpg" >
        <img src="img/3.jpg" >
        <img src="img/4.jpg" >
        <img src="img/5.jpg" >
    </div>
    <div class="btn">
        <a href="javascript:;" id="btnleft" class="arrow">&lt;</a>
        <a href="javascript:;" id="btnright" class="arrow">&gt;</a>
    </div>
    <div class="item">
        <span data-index="0"></span>
        <span data-index="1"></span>
        <span data-index="2"></span>
        <span data-index="3"></span>
        <span data-index="4"></span>
    </div>
</div>
<script type="text/javascript">
    var autoMove = {
        imgs: null,        //img節點數量(圖片數量)
        spans: null,       //span節點數量(左下角圓圈)
        count: 0,          //對輪播播放到那張圖片進行計數
        scollMove: -1,     //span節點數量(左下角圓圈)
        lastNode: 0,       //上一張img和span索引位置
        //通過對img opacity修改，達到對img顯隱的控制
        //index: 輪播索引。img輪播到那個位置，就對該位置的img樣式進行設置。首先將上一張img樣式opacity變為0，然後將index位置img樣式opacity設置為1
        styleMovement: function (index) {
            var tempLastNode = this.lastNode, tempImgs = this.imgs, tempSpans = this.spans;
            tempImgs[tempLastNode].style.opacity = "0";
            tempSpans[tempLastNode].style.background = "#ffffff";
            tempImgs[index].style.opacity = "1";
            tempSpans[index].style.background = "#ff0000";
            this.lastNode = index;
        },
        //輪播按count計數進行切換。初始化時顯示第一張圖片，然後隱藏第一張圖片顯現第二張圖片，以此類推
        //此處count從1開始計數（初始化時count為0），依次執行。當count===imgs.length時，由於圖片最後一張的imgs索引是imgs.length-1,故將count重置為0，起到一個輪循作用，依次重新開始。
        shiftMovement: function () {
            autoMove.styleMovement(this.count++);
            if (this.count === this.imgs.length) {
                this.count = 0;
            }
        },
        //按鈕和點擊操作
        btnAction: function (type) {
            clearInterval(this.scollMove);      //按鈕操作之前，先清除輪播定時器，避免時間沖突
            switch (type) {
                case "left": {
                    if (this.count === 0) {
                        this.count = (this.imgs.length - 1);
                    } else {
                        this.count--;
                    }
                    autoMove.styleMovement(this.count);
                    break;
                }
                case "right": {
                    autoMove.shiftMovement();
                    break;
                }
                default: {
                    this.count = type;
                    autoMove.styleMovement(type);
                    break
                }
            }
            this.scollMove = setInterval(function () {      //鼠標操作完成後，重新執行輪播定時器
                autoMove.shiftMovement();
            }, 2000);
        },
        //事件綁定
        bindingEvent: function () {
            document.getElementById(‘btnleft‘).addEventListener("click", function () {       //給左按鈕綁定事件
                autoMove.btnAction("left");
            });
            document.getElementById(‘btnright‘).addEventListener("click", function () {      //給右按鈕綁定事件
                autoMove.btnAction("right");
            });
            document.querySelector(‘.item‘).addEventListener("click", function (event) {     //點擊某個具體span綁定事件
                autoMove.btnAction(parseInt(event.target.getAttribute("data-index")));
            });
        },
        //功能初始化:節點獲取，事件綁定，執行定時器
        init: function (par1,par2) {    //參數和功能初始化
            var tempImgs = this.imgs = document.getElementsByTagName(par1);
            var tempSpans = this.spans = document.getElementsByTagName(par2);
            var length = tempImgs.length;
            for (var i = length; i--;) {        //將所有img和span的opacity樣式都設置為0
                tempImgs[i].style.opacity = "0";
                tempSpans[i].style.background = "#ffffff";
            }
            autoMove.bindingEvent();
            autoMove.styleMovement(0);   //初始化時，顯示第一張圖片(索引為0的位置)
            this.count++;                //在執行輪播定時器之前，先將count計數自加 1，則在執行定時器時，圖片從第二張(索引為1)開始顯示，從而形成連貫顯示
            this.scollMove = setInterval(function () {   //設置輪播定時器，每2秒自動執行一次
                autoMove.shiftMovement()
            }, 2000)
        }
    };

    //加載完成執行
    window.onload = function () {
        autoMove.init("img", "span");
    };
</script>
</body>
</html>

js原生實現輪播

隱藏 asc head col count CA 依次 temp AI 　　前兩天同事面試新人，讓現場寫”輪播的實現”。我一想這玩意貌似我也沒寫過啊，就在旁邊暗搓搓地拖了一張紙也在那寫，同事都納悶了！這玩意實現方法有很多種，就看喜歡那種，喜歡怎麽

js原生實現輪播

js原生實現輪播

js原生實現輪播圖效果（面向對象編程）

利用js來實現輪播圖

js原生圖片輪播

h5原生js實現輪播圖

原生js實現輪播

原生js實現輪播圖原理分析

原生js實現輪播圖原理

使用原生js實現輪播圖效果

JS原生程式碼實現輪播圖（無左右滑動，底下圓點按鈕）

用原生js實現輪播圖

原生JS實現輪播圖1---勻速動畫

利用原生js實現輪播圖效果

animate動畫、原生JS實現輪播圖

原生JS實現輪播圖的幾種方式

原生JS實現輪播圖

1、js原生實現移動端手指滑動輪播圖效果

js原生實現移動端手指滑動輪播圖效果

原生JS實現輪播效果

前端基礎功能，原生js實現輪播圖例項教程

js原生實現輪播

相關推薦