1. 首页
  2. 编程语言
  3. Javascript
  4. 原生JS运动实现轮播图

原生JS运动实现轮播图

上传者: 2021-10-11 06:32:46上传 PDF文件 86.55 KB 热度 28次

**基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到最后一张时,将ul的left值设为0,即可达到图片无线轮播的效果。函数需传入元素、目标值、callback。HTML部分HTML中包含一个div,用来显示当前要播放的图片,该div中又包含一个ul、三个div,代码如下:CSS代码此处采用的为内联样式表要点:1、当图片运动到最后一张时,将ul的left值设为0即可实现无限轮播;以上即为通过原生JS运动所实现的图片轮播。

下载地址
用户评论