前端小案例轮播图HTMLCSSJS,-附源码

JAY.LIN 收录于 Web

2024-01-27 约 1248 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=135887557

前端小案例——轮播图（HTML+CSS+JS, 附源码）

一、前言

实现功能：

显示多张图片，每张图片占据轮播图容器的一部分空间。
实现向左和向右的切换按钮，可以点击按钮切换到上一张或下一张图片。
在底部显示小圆点，表示当前显示的图片，点击小圆点可以跳转到对应的图片。

实现逻辑：

首先，使用 querySelectorAll 方法获取所有的轮播项元素，并将其保存在 items 变量中。
定义一个全局变量 current ，用于记录当前显示的轮播项的索引，默认为0。通过操作 current 变量来控制显示的轮播项。并通过调用相关函数来更新显示和样式
定义 showSlide 函数，用于显示当前的轮播项。通过遍历所有轮播项，设置其 transform 属性来实现水平滑动效果。同时，调用 updateDots 函数更新小圆点的样式。
定义 prevSlide 函数，用于切换到上一张轮播项。如果 current 大于0，则将 current 减1；否则，将 current 设置为最后一张轮播项的索引。然后，调用 showSlide 函数显示对应的轮播项。
定义 nextSlide 函数，用于切换到下一张轮播项。如果 current 小于轮播项的数量减1，则将 current 加1；否则，将 current 设置为0。然后，调用 showSlide 函数显示对应的轮播项。
使用 setInterval 方法定义一个定时器 timer ，每隔3秒自动调用一次 nextSlide 函数，实现自动播放功能。
定义 pauseTimer 函数，用于暂停定时器。通过调用 clearInterval 方法，清除定时器 timer 。
定义 resumeTimer 函数，用于恢复定时器。重新设置定时器 timer ，调用 nextSlide 函数实现轮播功能。
添加鼠标悬停和离开事件监听器，当鼠标悬停在轮播图上时，调用 pauseTimer 函数暂停自动播放；当鼠标离开时，调用 resumeTimer 函数恢复自动播放。
使用 querySelectorAll 方法获取所有的小圆点元素，并将其保存在 dots 变量中。
定义 updateDots 函数，用于更新小圆点的样式。遍历所有小圆点元素，移除它们的 active 类名，然后根据 current 变量为当前轮播项对应的小圆点添加 active 类名。
定义 jumpToSlide 函数，用于跳转到指定的轮播项。将 current 变量设置为指定轮播项的索引，然后调用 showSlide 和 updateDots 函数，显示对应的轮播项并更新小圆点的样式。

二、项目运行效果

三、全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
            background-repeat: no-repeat;
        }
        .carousel {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        .carousel-inner {
            display: flex;
            width: 100%;
            transition: transform 0.6s ease-in-out;
        }
        .item {
            flex: 0 0 100%;
            height: 55vh;
        }
        .item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 80px;
            z-index: 10;
            cursor: pointer;
        }
        .left {
            left: 25px;
        }
        .right {
            right: 25px;
        }

        .dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            z-index: 15;
            width: 60%;
            padding-left: 0;
            margin-left: -30%;
            text-align: center;
            list-style: none;
        }

        .dots > li {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 1px;
            cursor: pointer;
            background-color: rgba(0,0,0,0);
            border: 1px solid #fff;
            border-radius: 10px;
        }

        .dots .active {
            width: 12px;
            height: 12px;
            margin: 0;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="carousel" id="carousel">
        <div class="carousel-inner">
            <div class="item">
                <img src="1.png" style="background-color: pink;">
            </div>
            <div class="item">
                <img src="2.png" style="background-color: bisque;">
            </div>
            <div class="item">
                <img src="3.jpg" style="background-color: rgb(144, 255, 236);">
            </div>
            <div class="item">
                <img src="4.jpg" style="background-color: rgb(248, 99, 124);">
            </div>
            <div class="item">
                <img src="5.jpg" style="background-color: rgb(210, 161, 250);">
            </div>
        </div>
        <div class="carousel-control left" onclick="prevSlide()">&lsaquo;</div>
        <div class="carousel-control right" onclick="nextSlide()">&rsaquo;</div>

        <div class="dots">
            <li class="active" onclick="jumpToSlide(0)"></li>
            <li onclick="jumpToSlide(1)"></li>
            <li onclick="jumpToSlide(2)"></li>
            <li onclick="jumpToSlide(3)"></li>
            <li onclick="jumpToSlide(4)"></li>
        </div>
    </div>
</body>
    <script>
        let items = document.querySelectorAll('.item');
        let current = 0;
        function showSlide() {
            items.forEach(item => {
                item.style.transform = `translateX(-${current * 100}%)`;
            });
            updateDots();
        }

        function prevSlide() {
            if (current > 0) {
                current--;
            } else {
                current = items.length - 1;
            }
            showSlide();
        }

        function nextSlide() {
            if (current < items.length - 1) {
                current++;
            } else {
                current = 0;
            }
            showSlide();
        }

        let timer = setInterval(nextSlide, 3000);

        function pauseTimer() {
            clearInterval(timer);
        }
        function resumeTimer() {
            timer = setInterval(nextSlide, 3000);
        }

        document.getElementById('carousel').addEventListener('mouseover', pauseTimer);
        document.getElementById('carousel').addEventListener('mouseout', resumeTimer);

        let dots = document.querySelectorAll('.dots li');

        function updateDots() {
            dots.forEach(dot => {
                dot.classList.remove('active');
            });
            dots[current].classList.add('active');
        }

        function jumpToSlide(index) {
            current = index;
            showSlide();
            updateDots();
        }
    </script>
</html>

四、答疑解惑

这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和图片，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主。

还多请各位小伙伴多多点赞支持，你们的支持是我最大的动力。

博主VX：18884281851

谢谢各位的支持~~

目录

前端小案例轮播图HTMLCSSJS,-附源码

前端小案例——轮播图（HTML+CSS+JS, 附源码）

一、前言

实现功能：

实现逻辑：

二、项目运行效果

三、全部代码

四、答疑解惑