欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js原生实现轮播

程序员文章站 2022-04-04 15:28:27
通过对img opacity样式的修改,达到对img显隐的控制,从而形成轮播 ......

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

这玩意实现方法有很多种,就看喜欢那种,喜欢怎么写而已。我这里是通过对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>