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

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

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

效果

这里写图片描述

思路

将图片放入列表中,使用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();
版权声明:本文为zjw_python原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zjw_python/article/details/82055245