原生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 实现的简单无缝滚动轮播图的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
详解jQuery事件
Jan 13 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
Angular性能优化之第三方组件和懒加载技术
Vue通过懒加载提升页面响应速度
如何开发一个渐进式Web应用程序PWA
Html5生成验证码的示例代码
May 10 #Javascript
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
You might like
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
基于php伪静态的实现详细介绍
2013/04/28 PHP
php去除HTML标签实例
2013/11/06 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
3种php生成唯一id的方法
2015/11/23 PHP
设定php简写功能的方法
2019/11/28 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
JavaScript多线程详解
2015/08/12 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
python标准算法实现数组全排列的方法
2015/03/17 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python try except 捕获所有异常的实例
2018/10/18 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
总会计师岗位职责
2014/02/19 职场文书
供用电专业求职信
2014/07/07 职场文书
地陪导游欢迎词
2015/01/26 职场文书
七年级生物教学反思
2016/02/20 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
PHP RabbitMQ消息列队
2022/05/11 PHP
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技