js原生实现轮播

2018-06-24 02:12:59来源：未知阅读 ()

　　前两天同事面试新人，让现场写”轮播的实现”。我一想这玩意貌似我也没写过啊，就在旁边暗搓搓地拖了一张纸也在那写，同事都纳闷了！

这玩意实现方法有很多种，就看喜欢那种，喜欢怎么写而已。我这里是通过对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" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
    </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>