利用JavaScript实现静态轮播图

最新推荐文章于 2023-07-18 12:00:46 发布

海阔天空ZMZ

最新推荐文章于 2023-07-18 12:00:46 发布

阅读量554

点赞数

分类专栏： JavaScript 文章标签： JavaScript 轮播图静态

本文链接：https://blog.youkuaiyun.com/weixin_45457515/article/details/99760525

版权

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

这篇博客介绍了如何用JavaScript实现静态轮播图的详细步骤，动态轮播图的实现将在后续内容中探讨。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇例举的是静态轮播图，动态轮播图会在以后实现
如图所示
在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
        }

        .box {
            width: 700px;
            height: 525px;
            margin: 10px auto;
            border: 1px solid #000;
            position: relative;
        }

        .list {
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, .3);
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            font-size: 20px;
        }

        .list span {
            color: #fff;
            font-size: 20px;
        }

        .nav {
            position: absolute;
            left: 0;
            bottom: 40px;
            text-align: center;
            width: 100%;
        }

        .nav span {
            cursor: pointer;
            display: inline-block;
            width: 0;
            height: 0;
            border: 6px solid #eee;
            border-radius: 50%;
            margin-right: 5px;
        }

        .nav .active {
            border: 6px solid #f60;
        }

        .content {
            position: absolute;
            left: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .3);
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            font-size: 20px;
        }

        button {
            width: 30px;
            height: 50px;
            position: absolute;
            top: 50%;
            margin-top: -25px;
            cursor: pointer;
        }

        .prev {
            left: 0;
        }

        .next {
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <p class="list"><span>1</span>/<span>4</span></p>
        <img src="images/1.jpg" alt="">
        <p class="nav">
            <!-- <span class="active"></span>
            <span></span> -->
        </p>
        <p class="content">美女1</p>
        <button class="prev">
            <</button> <button class="next">>
        </button>
    </div>
    <script>
        var box = document.querySelector('.box');
        var lists = document.querySelectorAll('.list span');
        // console.log(lists)
        var imgs = document.querySelectorAll('.box img')[0];
        var nav = document.querySelector('.nav');
        var content = document.querySelector('.content');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var piclist = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"]
        var contlist = ['美女1', '美女2', '美女3', '美女4']
        var len = piclist.length;
        var str = '';
        for (i = 0; i < len; i++) {
            str += '<span></span>'
        }
        nav.innerHTML = str;
        lists[1].innerHTML = len
        var spans = document.querySelectorAll('.nav span');
        spans[0].className = 'active';
        for (i = 0; i < len; i++) {
            spans[i].index = i
            spans[i].onmouseover = function () {
                for (i = 0; i < len; i++) {
                    spans[i].className = ''
                }
                num = this.index
                this.className = 'active';
                imgs.src = piclist[this.index];
                content.innerHTML = contlist[this.index];
                lists[0].innerHTML = this.index + 1
            }
        }
        //  下一个按钮  和  划过的索引值  对应    num = this.index
        var num = 0;

        next.onclick = function () {

            num++;
            if (num > 3) {
                num = 0;
            }
            imgs.src = piclist[num];
            content.innerHTML = contlist[num];
            lists[0].innerHTML = num + 1;
            for (i = 0; i < len; i++) {
                spans[i].className = '';
            }
            spans[num].className = 'active';
        }
        prev.onclick = function () {
            num--;
            if (num < 0) {
                num = 3;
            }
            imgs.src = piclist[num];
            content.innerHTML = contlist[num];
            lists[0].innerHTML = num + 1;
            for (i = 0; i < len; i++) {
                spans[i].className = '';
            }
            spans[num].className = 'active';
        }
    </script>
</body>

</html>