js实现简单轮播效果

通过点击，变换图片，记录自己成长的日常。代码如下！！！
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点击切换</title>
    <style>
        .wrap {
            position: relative;
            margin: 50px auto;
            width: 600px;
            height: 380px;
            background-image: url("./images/01.png"); /*最开始显示的图片*/
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-shadow: rgba(0, 0, 0, .2) 0 1px 5px 0px;
        }
        
        .numList,
        .imgTitle {
            width: 100%;
            height: 22px;
            color: #fff;
            text-align: center;
            line-height: 22px;
            background: rgba(0, 0, 0, .6);
        }
        
        .imgTitle {
            position: absolute;
            bottom: 0;
            left: 0;
        }
        
        .leftBtn,
        .rightBtn {
            width: 40px;
            height: 30px;
            color: #fff;
            cursor: pointer;
            background: rgba(0, 0, 0, .6);
        }
        
        .leftBtn {
            position: absolute;
            top: 50%;
            left: 0;
        }
        
        .leftBtn:after,
        .rightBtn:after {
            position: absolute;
            top: 2px;
            left: 10px;
            content: "<";
            font-size: 20px;
            font-weight: bold;
            color: #fff;
        }
        
        .rightBtn {
            position: absolute;
            top: 50%;
            right: 0;
        }
        
        .rightBtn:after {
            content: ">";
        }
        
        .modeBtn {
            margin: 0 auto;
            width: 166px;
            height: auto;
            overflow: hidden;
        }
        
        .modeBtn>button {
            width: 80px;
            height: 40px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!-- 上方图片序列数 例：1/5-->
        <div class="numList">1/5</div>
        <!-- 下方标题名称处 例：不忘初心，牢记使命-->
        <div class="imgTitle">不忘初心，牢记使命</div>
        <!-- 左边按钮 -->
        <div class="leftBtn"></div>
        <!-- 右边按钮 -->
        <div class="rightBtn"></div>
    </div>
　　

　　<!-- 设置两种不同的模式-->
    <div class="modeBtn">
        <button>正常模式</button>
        <button>循环模式</button>
    </div>
    <script>
        // 获取各个元素,index用来接收变化之后图片的下标，通过改变下标的方式改变图片
        let oWrp = document.querySelector(".wrap"),
            oNumList = document.querySelector(".numList"),
            oImgTitle = document.querySelector(".imgTitle"),
            oLeftBtn = document.querySelector(".leftBtn"),
            oRightBtn = document.querySelector(".rightBtn"),
            oModeBtn = document.querySelectorAll(".modeBtn button"),
            index = 1; 

        // 封装函数，减少代码量
        function myFun() {
            oWrp.style.backgroundImage = "url(./images/0" + index + ".png)"; //字符串拼接，图片命名格式为:01.png,然后更改图片路径，就可以啦，图片数为5，可添加 添加图片后可稍稍修改代码
            oNumList.innerHTML = "" + index + "/5"
        }

        // 图片名称，封装函数，减少代码量，也可通过数组的方法更改标题名称
        function titleFun(num) {
            if (num == 1) {
                oImgTitle.innerHTML = "不忘初心，牢记使命";
            } else if (num == 2) {
                oImgTitle.innerHTML = "在祖国70周年国庆之际";
            } else if (num == 3) {
                oImgTitle.innerHTML = "祝祖国繁荣昌盛";
            } else if (num == 4) {
                oImgTitle.innerHTML = "祝博客园越来越好";
            } else if (num == 5) {
                oImgTitle.innerHTML = "祝我越学越精";
            }
        }
        // 正常模式下
        oModeBtn[0].onclick = function() {
            oModeBtn[0].style.backgroundColor = "red";
            oModeBtn[1].style.backgroundColor = "";
            oRightBtn.onclick = function() {
                index++;
                if (index == 6) index = 5;
                myFun();
                titleFun(index);
            }
            oLeftBtn.onclick = function() {
                index--;
                if (index == 0) index = 1;
                myFun();
                titleFun(index);
            }
        }

        // 循环模式下
        oModeBtn[1].onclick = function() {
            oModeBtn[0].style.backgroundColor = "";
            oModeBtn[1].style.backgroundColor = "red";

            oRightBtn.onclick = function() {
                index++;
                if (index == 6) index = 1;
                myFun();
                titleFun(index);
            }
            oLeftBtn.onclick = function() {
                index--;
                if (index == 0) index = 5;
                myFun();
                titleFun(index);
            }
        }
    </script>
</body>

</html>
效果图如下！
欢迎各位批评指导！！！
posted @ 2019-09-29 17:48 安雁-zzq 阅读(329) 评论(0) 收藏举报
刷新页面返回顶部
安雁-zzq

js实现简单轮播效果

公告
