编程 Javascript

原生Js 实现的简单无缝滚动轮播图的示例代码

Posted in Javascript onMay 10, 2021

简单无缝滚动轮播图存在很多漏洞，就是后期增加图片时会很不方便，需要改动的地方也很多，耦合性也很强，只适用于一部分程序，所以我们可以通过改动图片结构和计算折算点的方式，升级代码。

原简单的滚动轮播代码

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            position: relative;
            width: 830px;/*展示宽度 展示4个图+3个边框=830*/
            height: 130px;
            border: 10px solid rgb(15, 15, 15);
            margin: 100px auto;
            overflow: hidden;
        }
        .scroll ul{
            position: absolute;
            width: 5000px;/*ul能存下所有li的宽*/
            height: 130px;
            top: 0;
            left: 0;
        }
        .scroll ul li{
            float: left;
            width: 200px;
            height: 130px;
            margin-right: 10px;
            overflow: hidden;
        }

    </style>
</head>
<body>
    <div id="scroll" class="scroll">
        <ul id="munit">
            <li><img src="../BOM/shuzi/3.png" alt=""></li>
            <li><img src="../BOM/shuzi/4.png" alt=""></li>
            <li><img src="../BOM/shuzi/5.png" alt=""></li>
            <li><img src="../BOM/shuzi/6.png" alt=""></li>
            <li><img src="../BOM/shuzi/7.png" alt=""></li>
            <li><img src="../BOM/shuzi/8.png" alt=""></li>
            <li><img src="../BOM/shuzi/9.png" alt=""></li>

            <li><img src="../BOM/shuzi/3.png" alt=""></li>
            <li><img src="../BOM/shuzi/4.png" alt=""></li>
            <li><img src="../BOM/shuzi/5.png" alt=""></li>
            <li><img src="../BOM/shuzi/6.png" alt=""></li>
            <li><img src="../BOM/shuzi/7.png" alt=""></li>
            <li><img src="../BOM/shuzi/8.png" alt=""></li>
            <li><img src="../BOM/shuzi/9.png" alt=""></li>
        </ul>
    </div>

    <script>
        //获取元素
        var scroll = document.getElementById("scroll");
        var munit = document.getElementById("munit");
        var li = munit.children;
        // 进行滚动
        var nowLeft = 0;
        //要找到ul元素运动的折返点
        var back = -1470;//图和边框是li的宽度，展示的有4张图，所以折返点就是1260
        //定时器
        var timer = setInterval(run,20);

        // 鼠标移上scroll停止
        scroll.onmouseover = function(){
            clearInterval(timer);
        }
        // 移开轮播
        scroll.onmouseout = function(){
            timer = setInterval(run,20);
        }

        //运动函数
        function run(){
            nowLeft -= 2;
            //判断是否走到了折返点，走到了，则瞬间切换到0位置
            if(nowLeft <= back){
                nowLeft = 0;
            }
            munit.style.left = nowLeft + "px";
        }

       
    </script>
</body>
</html>

在<div id="scroll">结构给ul新增的一个父级div，这样之后添加图片，后期通过获取ul宽度就可以了计算折算点
1、折返点计算需要通过Js自动计算
var back = -munit.offsetWidth;//元素左移，值为负数
2、自动生成另一组对应的图片结构 li
munit.innerHTML = munit.innerHTML + munit.innerHTML;//这样就会增加一组li标签，后期增加图片也会随之增加
修改部分代码，

css改写部分：
  /*给ul新增的一个父级div，这样添加图片后期获取ul宽度 就可以了 */
        .scroll .inner{
            position: relative;
            width: 5000px;
        }
        .scroll ul{
            position: absolute;
            height: 130px;
            top: 0;
            left: 0;
            list-style: none;


body改写部分：      
<body>
    <div id="scroll" class="scroll">
       <div class="inner">
           <ul id="munit">
              <li><img src="../BOM/shuzi/3.png" alt=""></li>
              <li><img src="../BOM/shuzi/4.png" alt=""></li>
              <li><img src="../BOM/shuzi/5.png" alt=""></li>
              <li><img src="../BOM/shuzi/6.png" alt=""></li>
              <li><img src="../BOM/shuzi/7.png" alt=""></li>
              <li><img src="../BOM/shuzi/8.png" alt=""></li>
              <li><img src="../BOM/shuzi/9.png" alt=""></li>
              <li><img src="../BOM/shuzi/10.png" alt=""></li>
          </ul>
       </div>
    </div>

JS改写部分：
<script>
        //获取元素
        var scroll = document.getElementById("scroll");
        var munit = document.getElementById("munit");

        //改写部分
        //1 折返点计算需要通过Js自动计算
        var back = -munit.offsetWidth;//元素左移，值为负数
        //2 自动生成另一组对应的图片结构 li
        munit.innerHTML = munit.innerHTML + munit.innerHTML;
        // 进行滚动


        var nowLeft = 0;
        //定时器
        var timer = setInterval(run,20);

        // 鼠标移上scroll停止
        scroll.onmouseover = function(){
            clearInterval(timer);
        }
        // 移开轮播
        scroll.onmouseout = function(){
            timer = setInterval(run,20);
        }

        //运动函数
        function run(){
            nowLeft -= 1;
            //判断是否走到了折返点，走到了，则瞬间切换到0位置
            if(nowLeft <= back){
                nowLeft = 0;
            }
            munit.style.left = nowLeft + "px";
        }

    </script>
</body>
</html>

这样的代码耦合性低，也适合任意个数的li、任意大小的图片的加入

以上就是原生Js 实现的简单无缝滚动轮播图的示例代码的详细内容，更多关于Js 实现的简单无缝滚动轮播图的资料请关注三水点靠木其它相关文章！

原生Js 实现的简单无缝滚动轮播图的示例代码

- Author -

小白可别不举铁

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

使用正则替换变量

May 05 Javascript

Mootools 1.2 手风琴（Accordion）教程

Sep 15 Javascript

setTimeout和setInterval的区别你真的了解吗?

Mar 31 Javascript

遍历DOM对象内的元素属性示例代码

Feb 08 Javascript

BOM系列第二篇之定时器requestAnimationFrame

Aug 17 Javascript

jQuery插件DataTable使用方法详解(.Net平台)

Dec 22 Javascript

浅谈JavaScript中promise的使用

Jan 11 Javascript

koa大型web项目中使用路由装饰器的方法示例

Apr 02 Javascript

vue2 中二级路由高亮问题及配置方法

Jun 10 Javascript

javascript的惯性运动实现代码实例

Sep 07 Javascript

解决vue单页面应用打包后相对路径、绝对路径相关问题

Aug 14 Javascript

js删除对象中的某一个字段的方法实现

Jan 11 Javascript

Angular性能优化之第三方组件和懒加载技术

Vue通过懒加载提升页面响应速度

如何开发一个渐进式Web应用程序PWA

Html5生成验证码的示例代码

May 10 #Javascript

Vue详细的入门笔记

如何理解Vue前后端数据交互与显示

Vue实现下拉加载更多

May 09 #Vue.js

You might like

PHP.MVC的模板标签系统(三)

2006/09/05 PHP

发挥语言的威力--融合PHP与ASP

2006/10/09 PHP

一个简单的MySQL数据浏览器

2006/10/09 PHP

Yii框架在页面输出执行sql语句以方便调试的实现方法

2014/12/24 PHP

PHP多维数组元素操作类的方法

2016/11/14 PHP

php源码之将图片转化为data/base64数据流实例详解

2016/11/27 PHP

基于Jquery制作的幻灯片图集效果打包下载

2011/02/12 Javascript

页面右下角弹出提示框示例代码js版

2013/08/02 Javascript

js setTimeout 参数传递使用介绍

2013/08/13 Javascript

js Date概念详细介绍

2013/11/22 Javascript

jQuery中removeData()方法用法实例

2014/12/27 Javascript

JavaScript实现查找字符串中第一个不重复的字符

2014/12/29 Javascript

node.js [superAgent] 请求使用示例

2015/03/13 Javascript

程序员必知35个jQuery 代码片段

2015/11/05 Javascript

JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

2016/11/30 Javascript

jQuery Form表单取值的方法

2017/01/11 Javascript

基于vue2.0+vuex+localStorage开发的本地记事本示例

2017/02/28 Javascript

通过js控制时间,一秒一秒自己动的实例

2017/10/25 Javascript

Vue作用域插槽slot-scope实例代码

2018/09/05 Javascript

Vue.js构建你的第一个包并在NPM上发布的方法步骤

2019/05/01 Javascript

vue图片上传组件使用详解

2019/12/23 Javascript

在Vue中使用Echarts实例图的方法实例

2020/10/10 Javascript

Vite和Vue CLI的优劣

2021/01/30 Vue.js

[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic

2018/04/03 DOTA

pip 安装库比较慢的解决方法(国内镜像)

2019/10/06 Python

python 递归调用返回None的问题及解决方法

2020/03/16 Python

在python中list作函数形参,防止被实参修改的实现方法

2020/06/05 Python

Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)

2020/06/23 Python

Python钉钉报警及Zabbix集成钉钉报警的示例代码

2020/08/17 Python

Pandas DataFrame求差集的示例代码

2020/12/13 Python

美国韩国化妆品和护肤品购物网站：Beautytap

2018/07/29 全球购物

美国最好的葡萄酒网上商店：Wine Library

2019/11/02 全球购物

汽车维修求职信

2014/06/15 职场文书

2014年自愿离婚协议书范本

2014/09/25 职场文书

2014乡镇领导班子四风对照检查材料思想汇报

2014/10/05 职场文书

2016党员发展对象培训心得体会

2016/01/08 职场文书