JS简易轮播图实现-优快云博客

js 简单轮播图

diaplay原理轮播

话不多说先上代码

<!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>Document</title>
    <style>
        .box {
            width: 800px;
            height: 500px;
            margin: 50px auto;
            position: relative;
        }

        .box>img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .box>.change {
            display: block;
        }

        .button {
            width: 200px;
            height: 15px;
            position: absolute;
            bottom: 20px;
            left: 300px;

        }

        .button>div {
            float: left;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
            margin: 0 15px;
        }

        .button>.btn {
            background: pink;
        }

        .left {
            left: 0;
        }

        .left,
        .right {
            width: 50px;
            height: 150px;
            position: absolute;
            background: #ddd;
            top: 210px;
            text-align: center;
            line-height: 150px;
            opacity: .4;
        }

        .right {
            right: 0;
        }
    </style>
    <link rel="stylesheet" href="./iconfont.css">
</head>

<body>
//基本样式 属性名不用改 样式都可以改
    <div class="box">
        <img src="./images/01.jpg" class="change"> // 图片自己换
        <img src="./images/02.jpg">
        <img src="./images/12.jpg">
        <img src="./images/03.jpg">
        <div class="button">
            <div class="btn"></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="left iconfont icon-zuo"></div>
        <div class="right iconfont icon-you"></div>
    </div>

    <script>
        var box = document.querySelector(".box");
        var pic = document.querySelectorAll("img");
        var btn = document.querySelectorAll(".button>div");
        var left = document.querySelector(".left");
        var right = document.querySelector(".right");
        var num = 0;
        //定时器（下一页函数（图片display转换）,1000）== 自动轮播
        //下一页函数
        var r = function () {
            if (num >= pic.length - 1) {
                num = 0;
            } else {
                num++;
            }
            tar();
        }
        //图片display转换函数
        function tar() { 
            for (var i = 0; i < pic.length; i++) {
                pic[i].index = i;
                pic[i].className = "";
                btn[i].className = "";
            }
            pic[num].className = "change";
            btn[num].className = "btn"
         }
        //定时器
        var timer = setInterval(r, 1000);
        //鼠标移入停止轮播
        box.onmouseover = function () {
            clearInterval(timer);
        }
        //鼠标移出开始轮播
        box.onmouseout = function () {
            timer = setInterval(r, 1000)
        }
        //导航
        for (var i = 0; i < btn.length; i++) {
            btn[i].index = i;
            btn[i].onclick = function () {
                for (var i = 0; i < btn.length; i++) {
                    pic[i].className = "";
                    btn[i].className = "";
                }
                this.className = "btn";
                pic[this.index].className = "change";
            }
        }
        //侧边栏 向左
        left.onclick = function(){
            if(num <= 0){
                num = pic.length-1;
            }else{
                num--;
            }
            console.log(num);
            tar();
        }
        //侧边栏 向右
        function aa(){
            
            right.onclick = function(){
                if(num >= pic.length-1){
                    num = 0;
                }else{
                    num++;
                }
                tar();
            }
        }


    </script>
</body>

</html>