原生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 相关文章推荐
JavaScript OOP面向对象介绍
Dec 02 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
浅析JavaScript动画
Jun 10 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
详解Node.js串行化流程控制
May 04 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
Angular性能优化之第三方组件和懒加载技术
Vue通过懒加载提升页面响应速度
如何开发一个渐进式Web应用程序PWA
Html5生成验证码的示例代码
May 10 #Javascript
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
You might like
风格模板初级不完全修改教程
2006/10/09 PHP
聊天室php&amp;mysql(五)
2006/10/09 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
python实现类之间的方法互相调用
2018/04/29 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
深入了解python列表(LIST)
2020/06/08 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
财务会计实习报告体会
2013/12/20 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
党日活动总结
2014/05/07 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
儿子满月酒致辞
2015/07/29 职场文书
2019消防宣传标语!
2019/07/10 职场文书
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers