原生 JS 实现无缝轮播图（基础版）

最新推荐文章于 2024-04-08 16:26:29 发布

杏子姐_1024

最新推荐文章于 2024-04-08 16:26:29 发布

阅读量4.8k

点赞数 2

分类专栏： # JavaScript 应用

本文链接：https://blog.csdn.net/weixin_44135121/article/details/87874216

版权

JavaScript 应用专栏收录该内容

21 篇文章 2 订阅

订阅专栏

一、前言

轮播图是大多数网站与应用最常见的效果，实现轮播图并不复杂，但是要实现无缝轮播，则需要抓住关键点。本文用原生 JS 实现一个无缝轮播图。

二、实现轮播图的基本思路

布局：

1. 使用 flex 布局使子元素水平排列；

2. 子元素宽度设置100%，flex-shrink 设置为 0（这个属性保证子元素不被压缩）;

逻辑：

1. 轮播的核心原理是每隔指定的时间（比如1.5s）改变父元素的指定 left（比如屏幕宽度）；

2. 轮播到最后一张图片（这里的最后一张指的是拼接的第一张）时；

①清除掉定时器；

②开启临界处理（重置父元素的left）；

③开启下一轮轮播。

这里是实现无缝轮播的关键；其目的是播放最后一张的同时，与第一张偷梁换柱。因为最后一张与第一张图片相同，所以快速地改变其 left 用户并无感知。并且同时开启下一轮定时器，1.5秒钟之后执行第二张图片播放。而这个1.5秒钟之内就好了准备（清除当前定时器，重置父元素 left）。

三、代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Carousel</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1">
</head>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    .slide {
        display: flex;
        position: relative;
        left: 0;
    }
    .slide img{
        width: 100%;
        height: 250px;
    }
    .slide>div{
        width: 100%;
        flex-shrink: 0;
        height: 250px;
    }
    .carousel {
        overflow: hidden;
        width: 100%;
        height: 250px;
    }
    .contain{
        position: relative;
    }
</style>
<body>
<div class="contain">
    <div class="carousel">
        <div class="slide">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
        </div>
    </div>
</div>
</body>
<script>
    var contain = document.querySelector('.contain');//获取需要改变left的元素
    var slide = document.querySelector('.slide');//获取需要改变left的元素
    var slideLength = slide.children.length+2;//轮播图个数
    var timer = null;//定时器初始为null
    var currentIndex = 1;//当前索引
    var width = window.innerWidth;//屏幕宽度
    window.onload = function () {
        var everyTime = 2000;//轮播的间隔时间
        //实现无缝轮播需要在首尾分别添加一张图片，
        //使第二轮播放的时候能无缝衔接,这是无缝轮播的关键点。
        var firstDom = slide.firstElementChild.cloneNode(true);
        var lastDom = slide.lastElementChild.cloneNode(true);
        slide.appendChild(firstDom);
        slide.insertBefore(lastDom,slide.firstElementChild);
        slide.style.left = -width+'px';
        autoPlay(everyTime);//页面打开后自动开启播放
        //自动播放
        function autoPlay(period) {
            timer = setInterval(function () {
                currentIndex++;
                //当移动到最后一张，也就是模拟的第一张
                if (currentIndex == slideLength - 1) {                 
                    //首先清除原先的定时器
                    clearInterval(timer);
                    //处理临界情况
                    criticality(1);
                    //通次继续下一次轮播
                    return autoPlay(period);
                } else {
                    if (currentIndex < slideLength - 1) {
                        play(-(width * currentIndex));
                    }
                }
            }, period)
        }

        //轮播公共方法
        function play(left) {
            //1、图片移动left px；
            slide.style.left = left + 'px';
            slide.style.transition = 'left 1.5s';
        }
        function criticality(boundary) {
            //继续走临界的轮播
            play(-(width * currentIndex));
            //在轮播的同时将距离重置
            setTimeout(function () {
                slide.style.left = -width * boundary + 'px';
                slide.style.transition = 'left 0s';
                currentIndex = boundary;
            }, 1500);
        }
    }
</script>
</html>

四、未完待续

以上实现的是基础无缝轮播图，还未实现左右可以点击播放等功能，想要了解更多请移步轮播图进阶篇https://blog.csdn.net/weixin_44135121/article/details/87887306。

杏子姐_1024

关注

2
点赞
踩
22

收藏

觉得还不错? 一键收藏
2
评论
原生 JS 实现无缝轮播图（基础版）

一、前言轮播图是大多数网站与应用最常见的效果，实现轮播图并不复杂，但是要实现无缝轮播，则需要抓住关键点。本文用原生 JS 实现一个无缝轮播图。二、实现轮播图的基本思路布局：1. 使用 flex 布局使子元素水平排列；2. 子元素宽度设置100%，flex-shrink 设置为0（这个属性保证子元素不被压缩）;逻辑：1. 轮播的核心原理是每隔指定的时间（比如1.5s）改...
复制链接

扫一扫