原生js实现无缝滚动轮播图（移动端）-自动轮播

最新推荐文章于 2024-09-27 11:18:45 发布

风雪夜过客

最新推荐文章于 2024-09-27 11:18:45 发布

阅读量4.9k

点赞数 5

分类专栏： js实用代码文章标签：轮播图原生js 移动端自动轮播自定义数量

本文链接：https://blog.csdn.net/qq_15964039/article/details/79881280

版权

本文介绍如何不依赖任何插件和库，仅使用原生JavaScript来创建适用于移动端的自动无缝滚动轮播图。作者在不满意现有的实现后，分享了自创的代码，包括HTML布局、CSS样式以及关键的JavaScript逻辑。

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

想不依赖任何插件和库，就用原生js实现移动端自动轮播，发现网上的都不尽如人意，干脆自己写一个，代码有部分参考，废话少说，上代码。

head部分，没什么好说的：

<meta charset="utf-8">
        <meta name="copyright" content="">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>原生js实现无缝滚动轮播图</title>

2.html部分，引用图片是通过http://lorempixel.com/400/200/，这是个可以随机生成图片的网站，很好用。

<div class="banner" id="banner">
    <div class="slider_list">

        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=0" title="">
            </a>
        </div>
        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=1" title="">
            </a>
        </div>
        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=2" title="">
            </a>
        </div>
        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=3" title="">
            </a>
        </div>
        <div class="swiper-slide">
            <a