热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了原生Js实现的简单无缝滚动轮播图的示例代码,帮助大家更好的理解喝学习使用js,感兴趣的朋友可以了解下

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

      原简单的滚动轮播代码



    
    
    
    
    


    

   在

结构给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改写部分:      

    
JS改写部分:

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

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


推荐阅读
  • 使用WinForms 实现 RabbitMQ RPC 示例
    本文通过两个WinForms应用程序演示了如何使用RabbitMQ实现远程过程调用(RPC)。一个应用作为客户端发送请求,另一个应用作为服务端处理请求并返回响应。 ... [详细]
  • 传送门A-Registration#include#definelllonglongusingnamespacestd;chars[15],t[15]; ... [详细]
  • 本题要求计算给定两个正整数a和b时,2的-a次方与2的-b次方之和,并将结果以最简分数形式表示。输入包括多组测试数据,每组数据包含两个在2到20范围内的整数。 ... [详细]
  • 在本问题中,游戏的每一步状态均可以视为原始序列的一个子序列。通过定义一个动态规划函数 d(i, j),表示在最优策略下,先手玩家从原序列的第 i 个元素到第 j 个元素之间所能获得的最大分数。 ... [详细]
  • 深入理解动态链接库及其应用
    本文将探讨动态链接库的基本概念,包括Windows下的动态链接库(DLL)和Linux下的共享库(Shared Library),并详细介绍如何在Linux环境中创建和使用这些库。 ... [详细]
  • 理解文档对象模型(DOM)
    本文介绍了文档对象模型(DOM)的基本概念,包括其作为HTML文档的节点树结构,以及如何通过JavaScript操作DOM来实现网页的动态交互。 ... [详细]
  • CentOS 7.2 配置防火墙端口开放
    本文介绍如何在 CentOS 7.2 系统上配置防火墙以开放特定的服务端口,包括 FTP 服务的临时与永久开放方法,以及如何验证配置是否生效。 ... [详细]
  • 本文介绍了如何利用Java中的URLConnection类来实现基本的网络爬虫功能,包括向目标网站发送请求、接收HTML响应、解析HTML以提取所需信息,并处理可能存在的递归爬取需求。 ... [详细]
  • 本文详细介绍了Java集合框架中的Collection体系,包括集合的基本概念及其与数组的区别。同时,深入探讨了Comparable和Comparator接口的区别,并分析了各种集合类的底层数据结构。最后,提供了如何根据需求选择合适的集合类的指导。 ... [详细]
  • 优化Input Checkbox与Label文本对齐的方法
    本文探讨了在网页设计中,如何有效解决input checkbox与label文字不对齐的问题。通过具体的代码实例和解决方案,帮助开发者实现更加美观的用户界面。 ... [详细]
  • 深入解析IGMP各版本特性及其演进
    本文详细探讨了Internet组管理协议(IGMP)的不同版本,包括IGMPv1的基础功能、IGMPv2的增强特性和IGMPv3的重要改进。特别分析了IGMPv3如何支持特定源组播(SSM)模型,并介绍了各版本之间的主要差异。 ... [详细]
  • YB02 防水车载GPS追踪器
    YB02防水车载GPS追踪器由Yuebiz科技有限公司设计生产,适用于车辆防盗、车队管理和实时追踪等多种场合。 ... [详细]
  • Java与JSON互转:实现JSON到Java对象及Java对象到JSON的转换
    本文详细介绍了如何在Java中实现JSON数据与Java对象之间的相互转换,包括代码示例和常见问题解决方法。 ... [详细]
  • MySQL锁机制详解
    本文深入探讨了MySQL中的锁机制,包括表级锁、行级锁以及元数据锁,通过实例详细解释了各种锁的工作原理及其应用场景。同时,文章还介绍了如何通过锁来优化数据库性能,避免常见的并发问题。 ... [详细]
  • 本文探讨了如何利用SqlDependency执行复杂的SQL查询,并确保在多线程环境下的安全性与效率。 ... [详细]
author-avatar
na点儿破事凶
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有