原生js实现轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

bug天选之子

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量474

点赞数 3

分类专栏：项目经验文章标签： javascript 网络运维前端笔记

本文链接：https://blog.csdn.net/weixin_70245286/article/details/132114914

版权

项目经验专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文详细阐述了使用JavaScript实现轮播图的原理，包括图片移动、动画、定位停止、切换逻辑、自动轮播、用户交互防止等问题，并给出了HTML和CSS代码示例。

摘要由CSDN通过智能技术生成

一.原生js实现轮播图的原理思路（面试常问）

1.图片移动实现原理：
利用浮动将所有所有照片依次排成一行，给这一长串图片添加一个父级的遮罩，每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。

2.图片移动动画原理：
从a位置移动到b位置，需要先计算两点之间的差值，通过差值和时间间隔，计算出每次移动的步长，通过添加定时器，每次移动相同的步长，实现动画效果。

3.图片定位停止原理：
每一张照片都有相同的宽度，每张照片都有一个绝对的定位数值，通过检测定每次移动后，照片当前位置和需要到达位置之间的距离是否小于步长，如果小于，说明已经移动到位，可以将定时器清除，来停止动画。

4图片切换原理：
在全局设置一个变量，记录当前图片的位置，每次切换或跳转时，只需要将数值修改，并调用图片页数转像素位置函数，再调用像素运动函数即可。

5.自动轮播原理：
设置定时器，一定时间间隔后，将照片标记加1，然后开始切换。

6.左右点击切换原理：
修改当前位置标记，开始切换。这里需要注意与自动轮播之间的冲突。当点击事件触发之后，停止自动轮播计时器，开始切换。当动画结束后再次添加自动轮播计时器。

7.无缝衔接原理：
需要无缝衔接，难度在于最后一页向后翻到第一页，和第一页向前翻到最后一页。由于图片的基本移动原理。要想实现无缝衔接，两张图片就必须紧贴在一起。所以在第一张的前面需要添加最后一张，最后一张的后面需要添加第一张。

7.预防鬼畜原理：
始终保证轮播图的运动动画只有一个，从底层杜绝鬼畜。需要在每次动画开始之前，尝试停止动画定时器，然后开始为新的动画添加定时器。

8.预防暴力点击原理：
如果用户快速点击触发事件，会在短时间内多次调用切换函数，虽然动画函数可以保证，不会发生鬼畜，但在照片从最后一张到第一张的切换过程，不会按照正常的轮播，而是实现了跳转。所以需要通过添加口令的方式来，限制用户的点击。当用户点击完成后，口令销毁，动画结束后恢复口令。

9.小圆点的位置显示原理：
每次触发动画时，通过全局变量标记，获取当前页数，操作清除所有小圆点，然后指定一页添加样式。

10.点击触发跳转的原理：
类似于左右点击触发，只是这是将全局页面标记，直接修改，后执行动画。需要避免与自动轮播定时器的冲突。

二.代码实现

<!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>
        .box {
            width: 100%;
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 轮播图容器样式 */
        .slideshow-container {
            position: relative;
            width: 500px;
            height: 300px;
            overflow: hidden;
        }

        /* 图片样式 */
        .slideshow-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 上一页/下一页按钮样式 */
        .prev,
        .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 30px;
            font-weight: bold;
            padding: 10px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }

        .prev {
            left: 10px;
        }

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

<body>
    <div class="box">
        <div class="slideshow-container">
            <img src="../../美女img/美女.jpeg" alt="Image 1">
            <img src="../../美女img/猫.jpg" alt="Image 2">
            <img src="../../美女img/虞书欣.jpeg" alt="Image 3">
        </div>
    </div>

    <script>
        // 封装轮播图的函数 
        function createSlideshow () {
            var container = document.querySelector('.slideshow-container');
            var slides = container.getElementsByTagName('img');
            var prevButton = document.createElement('div');
            var nextButton = document.createElement('div'); var currentIndex = 0;
            // 添加上一页/下一页按钮 
            prevButton.className = 'prev'; prevButton.innerHTML = '&#10094;';
            nextButton.className = 'next'; nextButton.innerHTML = '&#10095;';
            container.appendChild(prevButton); container.appendChild(nextButton);
            // 显示当前图片 
            function showSlide (index) {
                if (index < 0) {
                    index = slides.length - 1;
                } else if (index >= slides.length) {
                    index = 0;
                }
                currentIndex = index;
                for (var i = 0; i < slides.length; i++) {
                    slides[i].style.display = 'none';
                }
                slides[currentIndex].style.display = 'block';
            } // 上一页按钮点击事件 
            prevButton.addEventListener('click', function () { showSlide(currentIndex - 1); });
            // 下一页按钮点击事件 
            nextButton.addEventListener('click', function () { showSlide(currentIndex + 1); });
            // 初始化显示第一张图片 
            showSlide(currentIndex);
        }
        // 调用函数创建轮播图 
        createSlideshow(); 
    </script>

</body>

</html>