js轮播图

@万里挑一

已于 2023-09-23 15:11:24 修改

阅读量150

点赞数 7

分类专栏： javascript 文章标签： javascript css

于 2022-09-07 22:03:05 首次发布

本文链接：https://blog.csdn.net/qq_59599812/article/details/126754448

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.此轮播图用原生js写的，内容过长。

2.完整版原生js轮播图

代码实现后展示：

3.图片自行更换自己喜欢的

4.复制时图片格式建议设成这种：

全部代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            position: relative;
            width: 800px;
            height: 400px;
            border: 1px solid;
            margin: 50px auto;
        }

        .box .view,
        .box .view img {
            width: 100%;
            height: 100%;
        }

        .box button {
            position: absolute;
            top: 150px;
            left: 20px;
            width: 50px;
            height: 100px;
            background-color: #cccccc5b;
            border: none;
            font-size: 30px;
            color: #cccccc81;
        }

        .box .rt {
            left: calc(100% - 70px);
        }

        .box:hover button {
            background-color: #cccccc6c;
            color: #999;
        }

        .box ul {
            display: flex;
            justify-content: center;
            position: absolute;
            top: 330px;
            width: 100%;
            height: 30px;
        }

        .box ul li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid #cccccc;
            margin: 0 25px;
            background-color: #000;
        }

        .box ul li:hover {
            border-color: #666;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <section class="box">
        <div class="view">
            <img src="" alt="images">
        </div>
        <button class="lt">&lt;</button>
        <button class="rt">&gt;</button>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>

</body>
<script>
    // 要求：上一页点击切换，下一页点击切换，圆点点击 “对应的图片显示”
    // 1.获取元素(图片，左右按钮，圆点)
    var img = document.querySelector('img');
    var ltBtn = document.querySelector('.lt');
    var rtBtn = document.querySelector('.rt');
    var circle = document.querySelectorAll('li');
    // 2.初始化图片和圆点样式
    var arr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']; //图片数组
    var count = 0; //代表下标“初始化下标”
    img.src = "../2022.06.07/img/" + arr[count]; 
    circle[count].style.backgroundColor = "red";
    // 3.添加事件
    // 上一张
    ltBtn.onclick = function () {
        count--;
        if (count < 0) {
            count = 3;
        }
        // 清除所有的圆点样式
        for (var i = 0; i < circle.length; i++) {
            circle[i].style.backgroundColor = "#000";
        }
        img.src = "../2022.06.07/img/" + arr[count];
        circle[count].style.backgroundColor = "red";
    }
    // 下一张
    rtBtn.onclick = function () {
        count++;
        if (count == 4) {
            count = 0;
        }
        // 清除所有的圆点样式
        for (var i = 0; i < circle.length; i++) {
            circle[i].style.backgroundColor = "#000";
        }
        img.src = "../2022.06.07/img/" + arr[count];
        circle[count].style.backgroundColor = "red";
    }
    // 圆点（事件，跟随）
    Array.from(circle).forEach(function (item, index, circle) {
        item.onclick = function () {
            // 清除所有的圆点样式
            for (var i = 0; i < circle.length; i++) {
                circle[i].style.backgroundColor = "#000";
            }
            img.src = "../2022.06.07/img/" + arr[index];
            circle[index].style.backgroundColor = "red";
        }
    });
</script>
</html>