热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

原生js实现轮播图实例教程,原生js轮播图实现原理

本文目录一览:1、用原生JS实现小米内容部分的类似轮播图的部分

本文目录一览:


  • 1、用原生JS实现小米内容部分的类似轮播图的部分


  • 2、js如何制作图片轮播


  • 3、js图片轮播点击


  • 4、JS制作轮播图

用原生JS实现小米内容部分的类似轮播图的部分

思路一 绝对定位+透明度

HTML示例代码

CSS示例代码

JS示例代码

思路二 绝对定位+left

HTML示例代码

CSS示例代码

JS示例代码

思路三 绝对定位+left+DOM操作

HTML示例代码

CSS示例代码

JS示例代码

思路一 绝对定位+透明度

原理:首先,将所有轮播图以绝对定位的方式定位父元素的相同位置;接着,实现上下键按钮修改active的下标;最后,将所有图片透明度重置为0,而被激活的图片透明度设置为1;

优点:实现最为简单,代码量小,图片过渡自然;

缺点:没有左右滑动效果

HTML示例代码

div id='container' ul id='img-list' liimg src=''//li liimg src=''//li liimg src=''//li liimg src=''//li /ul a id='pre-btn'span/span/a a id='next-btn'span/span/a /div

1

2

3

4

5

6

7

8

9

10

CSS示例代码

js如何制作图片轮播

工具/材料

Sublime Text

01

首先在Sublime Text下面准备一个html和5张图片,图片宽高为600px和400px,如下图所示

02

然后在HTML页面中布局轮播图的结构,如下图所示,主要包括图片区域,圆形按钮,左右箭头

03

接下来需要给轮播图页面布局声明一些样式,请按照下图所示的样式代码进行声明

04

最后就是实现轮播图的JS脚本功能,如下图所示,主要包括前进,后退,自动播放的功能

05

最后运行页面,你就会看到下图所示的轮播图效果,点击圆圈或者左右箭头可以切换轮播图

js图片轮播点击

实现轮播图思路

布局:

1. 使用 flex 布局使子元素水平排列;

2. 子元素宽度设置100%,flex-shrink 设置为 0(这个属性保证子元素不被压缩);

定时器无缝轮播:

轮播之前需要将首尾各添加一张图片。其目的就是实现无缝轮播。

然后将父元素 left 向左移动一个屏幕宽度的距离。这样才能让第二张(因为首尾各添加了一张图片,所以原先的第一张就变成了第二张)变成可视范围的第一张。

轮播到最后一张图片(这里的最后一张指的是拼接的第一张)时;

①清除掉定时器;

②开启临界处理(重置父元素的left);

③开启下一轮轮播。

这里是实现无缝轮播的关键;其目的是播放最后一张的同时,与第一张偷梁换柱。因为最后一张与第一张图片相同,所以快速地改变其 left 用户并无感知。并且同时开启下一轮定时器,1.5s 之后执行第二张图片播放。而这个 1.5s 之内就好了准备(清除当前定时器,重置父元素 left)。

右边按钮点击无缝轮播:

逻辑同定时器无缝轮播类似,因为方向都是从右向左播放。无缝轮播的核心都是播放到最后一张时偷梁换柱(播放最后一张图片的1.5s 同时,改变父元素 left 成初始值,负数的屏幕宽度)。

左边按钮点击无缝轮播:

左边按钮无缝轮播的核心与以上差不多,唯一的区别就是当播放到第一张图片时,开始偷梁换柱(播放第一张图片的1.5s 同时,改变父元素 left 成最大值,负数的(屏幕宽度*(子元素个数-2)))。

指示灯点击无缝轮播:

点击第一张图片时,同左边按钮点击无缝轮播。点击最后一张图片时,同右边按钮点击无缝轮播。

JS制作轮播图

轮播图是每个网站中必不可少的元素,那么如何用JS制作轮播图呢?下面我就给大家分享一下。

工具/材料

Sublime Text

01

首先需要在Sublime中创建HTML文档,然后在文档的body区域中加入如下图所示的轮播图内容

02

然后我们需要在style标签中给所添加的轮播图内容声明样式,如下图所示

03

接下来我们就需要在script标签中实现轮播图的动画脚本内容了,如下图所示,注意script标签的type类型一定要是Javascript

04

最后我们运行界面程序,你就会看到如下图所示的轮播图了,点击左右的箭头和中间的圆点都可以进行轮播图的切换


推荐阅读
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • 深入解析Gradle中的Project核心组件
    在Gradle构建系统中,`Project` 是一个核心组件,扮演着至关重要的角色。通过使用 `./gradlew projects` 命令,可以清晰地列出当前项目结构中包含的所有子项目,这有助于开发者更好地理解和管理复杂的多模块项目。此外,`Project` 对象还提供了丰富的配置选项和生命周期管理功能,使得构建过程更加灵活高效。 ... [详细]
  • 在2020年8月19日的深度分析中,我们探讨了HTML标签中同时存在`a`标签的`href`和`onclick`属性时的触发顺序问题。此外,还讨论了如何在一个自适应高度的父级`div`中,使两个子`div`中的一个固定高度为300px,另一个自动填充剩余空间的方法。最后,文章详细介绍了JavaScript异步加载的多种实现方式,包括但不限于`async`、`defer`属性以及动态脚本插入技术,为开发者提供了丰富的技术参考。 ... [详细]
  • 在一系列的学习与实践后,Jsoup学习笔记系列即将进入尾声。本文详细介绍了如何使用Jsoup实现从Saz文件到Csv格式的数据解析功能。未来,计划将此功能进一步封装,开发成具有用户界面的独立应用程序,以增强其实用性和便捷性。对于希望深入掌握Jsoup技术的开发者,本文提供了宝贵的参考和实践案例。 ... [详细]
  • 在Java应用程序中调用`response.getStatus()`方法时遇到了`NoSuchMethodError`异常,经过分析,初步判断为依赖冲突问题。通过检查项目依赖树发现,当前项目版本与某些库的版本不兼容,导致该方法无法被正确识别。建议通过更新相关依赖版本或使用依赖管理工具(如Maven或Gradle)来解决此问题,确保所有依赖项版本一致且兼容。 ... [详细]
  • 期末Web开发综合实践项目:运用前端技术打造趣味小游戏体验
    期末Web开发综合实践项目中,学生通过运用HTML、CSS和JavaScript等前端技术,设计并实现了一款趣味性十足的小游戏。该项目不仅检验了学生对前端基础知识的掌握情况,还提升了他们的实际操作能力和创意设计水平。视频链接展示了项目的最终成果,直观呈现了游戏的互动性和视觉效果。 ... [详细]
  • 在Spring框架中,基于Schema的异常通知与环绕通知的实现方法具有重要的实践价值。首先,对于异常通知,需要创建一个实现ThrowsAdvice接口的通知类。尽管ThrowsAdvice接口本身不包含任何方法,但开发者需自定义方法来处理异常情况。此外,环绕通知则通过实现MethodInterceptor接口来实现,允许在方法调用前后执行特定逻辑,从而增强功能或进行必要的控制。这两种通知机制的结合使用,能够有效提升应用程序的健壮性和灵活性。 ... [详细]
  • 深入解析:RKHunter与AIDE在入侵检测中的应用与优势
    本文深入探讨了RKHunter与AIDE在入侵检测领域的应用及其独特优势。通过对比分析,详细阐述了这两种工具在系统完整性验证、恶意软件检测及日志文件监控等方面的技术特点和实际效果,为安全管理人员提供了有效的防护策略建议。 ... [详细]
  • 解决Android Bitmap保存过程中背景色异常变黑的技术方案
    在开发一个Android应用时,遇到了一个长期未解决的问题:原本白色的背景在保存Bitmap图片时会变成黑色。经过深入研究,发现这可能与创建Bitmap对象时的默认设置有关。通过调整Bitmap的配置参数,并确保在保存图片时正确处理颜色信息,最终成功解决了这一问题。此外,还对代码进行了优化,以提高图片保存的效率和质量。 ... [详细]
  • 浏览器中 W3School JavaScript 的 Location 对象详解
    Location对象是浏览器Window对象的一部分,通过`window.location`属性可访问。它包含了当前页面URL的相关信息,如协议、主机名、路径和查询参数等,对于页面导航和URL操作非常有用。 ... [详细]
  • 表面缺陷检测数据集综述及GitHub开源项目推荐
    本文综述了表面缺陷检测领域的数据集,并推荐了多个GitHub上的开源项目。通过对现有文献和数据集的系统整理,为研究人员提供了全面的资源参考,有助于推动该领域的发展和技术进步。 ... [详细]
  • Django框架进阶教程:掌握Ajax请求的基础知识与应用技巧
    本教程深入探讨了Django框架中Ajax请求的核心概念与实用技巧,帮助开发者掌握异步数据交互的方法,提升Web应用的响应速度和用户体验。通过实例解析,详细介绍了如何在Django项目中高效实现Ajax请求,涵盖从基础配置到复杂场景的应用。 ... [详细]
  • 在MFC开发过程中,利用Windows内置的文件对话框可以显著提高文件操作的效率。本文总结了使用文件对话框进行文件选择和处理的经验,详细介绍了相关API的调用方法和参数设置,如`CFileDialog`类的使用、结构体`OPENFILENAME`的配置以及如何获取选中的文件路径。通过这些技巧,开发者可以快速实现文件的打开、保存等功能,提升应用程序的用户体验。 ... [详细]
  • JVM参数设置与命令行工具详解
    JVM参数配置与命令行工具的深入解析旨在优化系统性能,通过合理设置JVM参数,确保在高吞吐量的前提下,有效减少垃圾回收(GC)的频率,进而降低系统停顿时间,提升服务的稳定性和响应速度。此外,本文还将详细介绍常用的JVM命令行工具,帮助开发者更好地监控和调优JVM运行状态。 ... [详细]
  • 掌握DSP必备的56个核心问题,我已经将其收藏以备不时之需! ... [详细]
author-avatar
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有