原生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闭包
Nov 01 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
Angular性能优化之第三方组件和懒加载技术
Vue通过懒加载提升页面响应速度
如何开发一个渐进式Web应用程序PWA
Html5生成验证码的示例代码
May 10 #Javascript
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
You might like
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
jQuery的三种$()
2009/12/30 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
js word表格动态添加代码
2010/06/07 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
python超简单解决约瑟夫环问题
2015/05/12 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
浅谈Python处理PDF的方法
2017/11/10 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
Python3开发环境搭建详细教程
2020/06/18 Python
Java面试题及答案
2012/09/08 面试题
给幼儿园老师的表扬信
2014/01/19 职场文书
大学生活动策划方案
2014/02/10 职场文书
取保候审保证书
2014/04/30 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
大学生见习总结报告
2015/06/24 职场文书
汽车销售员工作总结
2015/08/12 职场文书
2016七夕情人节感言
2015/12/09 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python