史上最简单的无缝衔接轮播图

约定不等于承诺〃 2022-05-15 06:05 670阅读 0赞

网上有大量关于使用原生js编写轮播图的例子，不得不说，他们的文章很棒，但是我发现一个缺点，就是他们的轮播图组件太过于完整，添加了很多按钮功能，代码量较大。掩盖了轮播图的最基本也是最重要的实现原理，很容易让新手摸不着头脑。

**这篇文章的目的就是想用最少的代码，来讲解轮播图的实现原理，实现最基本的功能。等你学会了轮播图的实现后，至于之后怎么丰富轮播图，就是小菜一碟了**

## 效果 ##

![这里写图片描述][70]

## 思路 ##

将图片放入列表中，使用CSS浮动使其排成一行，实现无缝衔接。外层为显示框，设置overflow属性使其只能显示一张图片。通过左移或右移整个列表达到图片滑动的效果。利用定时器实现自动轮播。

## 代码 ##

html  
代码很简单，一个`div`里面是个列表，每张图片都是一个列表项。本例为一个3张图片的轮播图，但你仔细看列表，会发现却有5个列表项，这是为什么呢？这是因为为了实现无缝衔接，防止出现滑动空白而特意设置的，在头部和尾部分别插入了最后一张图片和第一张图片，所以最后有3+2=5个列表项。

<body>
        <div id="box">
            <ul id="pic_list">
                <li class="item"><img class="pic" src="./3.jpg" /></li>
                <li class="item"><img class="pic" src="./1.jpg" /></li>
                <li class="item"><img class="pic" src="./2.jpg" /></li>
                <li class="item"><img class="pic" src="./3.jpg" /></li>
                <li class="item"><img class="pic" src="./1.jpg" /></li>
            </ul>
        </div>
        <div class="btn">
            <button id="prev">前一张</button>
            <button id="next">后一张</button>
        </div>
        <script src="main.js"></script>
    </body>

css  
样式中值得注意的是，外部`div`的宽度和高度要和图片一致，且必须设置其`overflow:hidden`属性，使其始终显示一张图片。列表项的`float`属性，使图片排成一行，而`ul`列表的宽度为`500%`正好对应于5张图片。

#pic_list{
        list-style: none;
        height: 300px;
        width: 500%;
        padding: 0;
        margin: 0;
        position: relative;
        top:0;
    }
    
    .pic{
        width: 400px;
        height:300px;
        padding: 0;
        margin: 0;
    }
    
    .item{
        float: left;
    }
    
    #box{
        width: 400px;
        height: 300px;
        overflow: hidden;
        margin: 0 auto;
        border: 1px solid black;
        position: relative;
    }
    .btn{
        margin: 10px auto;
        width: 150px;
    }

js

const images = document.getElementById('pic_list'); //获取列表
    let index = 1; //当前显示图片的索引
    let length = document.getElementsByClassName('pic').length -2;  //获取图片的真实数量，不包括头尾插入的图片
    var animateTimeId = null, toggleTimeId = null; //两个用于setInterval方法的Id变量
    var distance = 0;  //页面滑动的距离
    
    //初始化时，显示第一张图片，将列表左移400px
    images.style.left = "-400px";
    
    //核心代码 页面滑动动画
    function animate(direction){
        if (! animateTimeId){  //当页面正在执行动画时，不能再触发动画
            const step = direction === 1 ? -10 : 10;  //确定向左滑还是向右滑
            animateTimeId = setInterval(function(){  
                distance += Math.abs(step);
                images.style.left = (parseInt(images.style.left) + step) + 'px';  //每次增加或减少一定值
                if (distance >= 400 ) { //当页面滑动的距离等于或大于图片的宽度时
                    clearInterval(animateTimeId); //停止动画
                    animateTimeId = null;
                    distance = 0; 
                    if (step < 0){  //计算滑动后页面的索引
                        index += 1;
                    }else{
                        index -= 1;
                    }
                    if (index === 0){  //如果已滑到列表头部
                        index = length;
                        images.style.left = length * (-400) + 'px';  //将列表左移
                    }else if (index === 4){  //如果已滑到列表尾部
                        index = 1;
                        images.style.left = '-400px'; //将列表右移
                    }
                }
            }, 15);
        }
    }
    
    function Init(){ //初始化，绑定按钮事件，并启动自动轮播
        const nextButton = document.getElementById('next');
        const prevButton = document.getElementById('prev');
        const box = document.getElementById('box');
    
        nextButton.onclick = function(){
            animate(1);
        };
        
        prevButton.onclick = function(){
            animate(2);
        };
    
        box.addEventListener('mouseenter', function(){
            clearInterval(toggleTimeId);
            toggleTimeId = null;
        });
        
        box.addEventListener('mouseleave', function(){
            toggleTimeId = setInterval(function(){
                animate(1);
            },2500);
        });
    
        toggleTimeId = setInterval(function(){
            animate(1);
        },2500);
    }
    
    Init();

--------------------

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[70]: /images/20220515/7b9ec858bb20485c8fc77432ad4a2a1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20220515/fe2811b581ca442aa7edcabb48df2bef.png

发表评论取消回复

表情：

评论列表（有 0 条评论，670人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery简单实现无缝可滑动轮播图

话不多说，直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta char

我会带着你远行/ 2023年07月17日 04:54/ 0 赞/ 38 阅读

相关 js实现无缝轮播图

需要引用上文封装的动画库代码如下： CSS样式 { margin: 0; padding: 0;

一时失言乱红尘/ 2023年06月25日 10:08/ 0 赞/ 132 阅读

相关史上最简单的原生JS实现轮播图效果

原生JS实现轮播图效果上篇文章我们说到了怎样利用原生JS实现Tab切换的效果，现在我们来说一下Tab切换的“升级版”。如何利用原生JS实现轮播图效果。如图： ![在

喜欢ヅ旅行/ 2023年02月13日 12:28/ 0 赞/ 52 阅读

相关 JS实现轮播图-无缝衔接

在这里封装了一个改变元素节点的运动的函数，使用的时候只要调用即可： 1、第一个参数是要操作元素节点。 2、第二个参数是一个对象存放样式名和对应样式的目标值。 3、第三个参

叁歲伎倆/ 2022年10月23日 15:26/ 0 赞/ 360 阅读

相关左右无缝轮播html,JS实现左右无缝轮播图代码

废话不多说了，直接给大家贴代码了。无缝轮播图：无缝轮播图 \\{margin: 0;padding:0; \} ul\{list-style: none;\} .

痛定思痛。/ 2022年10月10日 02:09/ 0 赞/ 487 阅读

相关史上最简单jquery轮播图

直接上代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>

﹏ヽ暗。殇╰゛Y/ 2022年07月16日 13:11/ 0 赞/ 272 阅读

相关 JQuery无缝轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam

淩亂°似流年/ 2022年05月31日 09:51/ 0 赞/ 426 阅读

相关史上最简单的无缝衔接轮播图

网上有大量关于使用原生js编写轮播图的例子，不得不说，他们的文章很棒，但是我发现一个缺点，就是他们的轮播图组件太过于完整，添加了很多按钮功能，代码量较大。掩盖了轮播图的最基本也

约定不等于承诺〃/ 2022年05月15日 06:05/ 0 赞/ 670 阅读

相关无缝轮播图切换

这里我们就不多废话了，大家应该都能看懂，直接上代码了，如果大神看到代码有问题，可以帮忙指点一下，谢谢 html <div class="banner">

深藏阁楼爱情的钟/ 2022年02月21日 07:47/ 0 赞/ 650 阅读

相关无缝轮播图

html: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

系统管理员/ 2021年03月25日 14:39/ 0 赞/ 786 阅读