js轮播图带箭头和小圆点的

最新推荐文章于 2022-04-02 22:20:42 发布

进阶的小牛

最新推荐文章于 2022-04-02 22:20:42 发布

阅读量1.5k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/datuzidppd5556/article/details/99346347

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 700px;
            height: 500px;
            margin: 0 auto;
            position: relative;
        }

        img {
            width: 700px;
            height: 500px;
        }

        p {
            position: absolute;
            bottom: 40px;
            margin-left: 50%;
            transform: translateX(-50%);
        }

        span {
            border: 10px solid #ccc;
            border-radius: 50%;
            display: inline-block;
            /* 要转换成inline-block，否则默认高度时16px；会拉伸圆 */
        }

        .active {
            border-color: skyblue;
        }

        h3 {
            position: absolute;
            bottom: 5px;
            color: palegreen;
            margin-left: 50%;
            transform: translateX(-50%);
        }

        h4 {
            position: absolute;
            top: 5px;
            color: bisque;
            margin-left: 50%;
            transform: translateX(-50%);
        }

        ul {
            position: absolute;
            top: 50%;
            left: 0%;
        }

        ul li {
            width: 70px;
            height: 60px;
            background-color: rgba(211, 102, 75, 0.7);
            text-align: center;
            list-style: none;
        }
        

        ul #next {
            margin-left: 630px;
            margin-top: -60px;
        }

        ul li h1 {
            color: aqua;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div>
        <img src="./image/p1.jpg" alt="">

        <p></p>
        <h3></h3>
        <h4></h4>

        <ul>
            <li id="pre">
                <h1>
                    < </h1> </li> <li id="next">
                        <h1> > </h1>
            </li>
        </ul>

    </div>
    <script>
        var pre = document.getElementById("pre");
        var next = document.getElementById("next");
        var imgs = document.getElementsByTagName("img");
        var pp = document.getElementsByTagName("p");
        var h = document.getElementsByTagName("h3");
        var hh = document.getElementsByTagName("h4");
        var arr = ["image/p1.jpg", "image/p2.jpg", "image/p3.jpg", "image/p4.jpg", "image/p5.jpg"];
        var str = "";
        // 有多少张图片就有多少个小圆点
        for (i = 0; i < arr.length; i++) {
            str += "<span></span>";//把所有的span都暂时存在str里面。
        }
        //把小圆点输出到页面
        pp[0].innerHTML = str;
        //划过小圆点切换图片
        var spans = document.getElementsByTagName("span");
        spans[0].className = "active";
        h[0].innerHTML = "图片1";
        hh[0].innerHTML = "1/4";
        for (i = 0; i < spans.length; i++) {
            spans[i].index = i;
            spans[i].onmousemove = function () {
                for (i = 0; i < spans.length; i++) {
                    spans[i].className = "";
                }
                n = this.index;//把n和小圆点关联起来
                this.className = "active";
                imgs[0].src = arr[this.index];
                h[0].innerHTML = "图片" + (this.index + 1);
                hh[0].innerHTML = (this.index + 1) + "/5";
            }
        }
        var n = 0;//他是一个全局变量，不会影响 n = this.index;的值。
        //箭头 pre next
        next.onclick = function () {
            n++;//默认的就是第0张图片，所以n++，如果n++放在最后面，需要点击两次才会换下一张图片。
            if (n > spans.length) {
                n=0;
            } 
            imgs[0].src = arr[n];
            for (i = 0; i < spans.length; i++) {
                spans[i].className = "";
            }
            spans[n].className = "active";
            h[0].innerHTML = "图片" + (n + 1);
            hh[0].innerHTML = (n + 1) + "/5";
        }
        pre.onclick = function () {
            n--;
            if (n < 0) {
                n=spans.length-1;
            } 
            imgs[0].src = arr[n];
            for (i = 0; i < spans.length; i++) {
                spans[i].className = "";
            }
            spans[n].className = "active";
            h[0].innerHTML = "图片" + (n + 1);
            hh[0].innerHTML = (n + 1) + "/5";
        }
    </script>
</body>

</html>

结果：在这里插入图片描述