js轮播图，可以修改后直接用

最新推荐文章于 2023-10-01 22:23:33 发布

进阶的小牛

最新推荐文章于 2023-10-01 22:23:33 发布

阅读量178

点赞数

分类专栏： js

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

版权

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>
        .pic {
            width: 600px;
            height: 400px;
            margin: 0 auto;
            position: relative;
        }

        img {
            width: 600px;
            height: 400px;
        }

        p {
            position: absolute;
            bottom: 10px;
        }

        span {
            border: 10px solid #cccccc;
            display: inline-block;
            border-radius: 50%;
        }

        .active {
            border: 10px solid skyblue;
            border-radius: 50%;
        }

        h2 {
            position: absolute;
            bottom: 20px;
            margin-left: 45%;
            color: skyblue;
        }

        h3 {
            position: absolute;
            top: 20px;
            margin-left: 45%;
            color: skyblue;
        }

        ul {
            list-style: none;
        }

        li {
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 25px;
            background-color: rgba(212, 14, 14, 0.3);
        }

        #pre {
            position: absolute;
            top: 50%;
            left: 0px;
            ;
        }

        #next {
            position: absolute;
            top: 50%;
            right: 0px;
        }
    </style>
</head>

<body>
    <div class="pic">
        <h2>1/4</h2>
        <img src="./作业/image/p1.jpg" alt="">
        <h3>图片1</h3>
        <p></p>
        <ul>
            <li id="pre">
                < </li> <li id="next"> >
            </li>
        </ul>
    </div>
    <script>
        var pic = document.querySelector('.pic');
        var pre = document.getElementById("pre");
        var next = document.getElementById("next");
        var imgs = document.getElementsByTagName("img")[0];
        var pp = document.getElementsByTagName("p")[0];
        var h = document.getElementsByTagName("h2")[0];
        var hh = document.getElementsByTagName("h3")[0];
        var arr = ["作业/image/p1.jpg", "作业/image/p2.jpg", "作业/image/p3.jpg", "作业/image/p4.jpg"];
        var str = "";
        for (i = 0; i < arr.length; i++) {
            // 把所有的span（小圆点）标签存放到str里
            str += "<span></span>"
        }
        // 把str输出到页面中去
        pp.innerHTML = str;
        // spans控制图片的显示
        var spans = document.getElementsByTagName("span");
        spans[0].className = "active";
        for (i = 0; i < spans.length; i++) {
            spans[i].index = i;//自定义索引值
            spans[i].onmouseover = function () {
                for (i = 0; i < spans.length; i++) {
                    spans[i].className = "";
                }
                n = this.index;
                this.className = "active";
                imgs.src = arr[this.index];
                h.innerHTML = (this.index + 1) + '/ 4';
                hh.innerHTML = "图片" + (Number(this.index) + Number(1));
            }
        }
        // 左右箭头 pre next
        var n = 0;//全局变量
        next.onclick = function () {
            n++;
            if (n >= arr.length) {
                n = 0;
            }
            imgs.src = arr[n];

            for (i = 0; i < spans.length; i++) {
                spans[i].className = "";
            }
            spans[n].className = "active";
            h.innerHTML = (n + 1) + '/ 4';
            hh.innerHTML = "图片" + (Number(n) + Number(1));
        }

        pre.onclick = function () {
            n--;
            if (n < 0) {
                n = arr.length - 1;
            }
            imgs.src = arr[n];
            for (i = 0; i < spans.length; i++) {
                spans[i].className = "";
            }
            spans[n].className = "active";
            h.innerHTML = (n + 1) + '/ 4';
            hh.innerHTML = "图片" + (Number(n) + Number(1));
        }
        // 让轮播图自己动
        var timer ;
        timer = setInterval(function(){
            next.onclick();   //调用下一张图片的事件，实现自动轮播的功能。   
        },2000);
        // 当鼠标移动到div时，轮播图停止不动
        pic.onmouseover = function(){
            clearInterval(timer);
        }
    </script>
</body>

</html>

进阶的小牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js轮播图，可以修改后直接用

js轮播图，修改后，可以自己用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
复制链接

扫一扫