JavaScript实现轮播图方法

效果图

先来看下效果图，嫌麻烦就不用具体图片来实现了，主要是理清思路。（自动轮播，左右按钮切换图片，小圆点切换图片，鼠标移入暂停轮播，鼠标移出继续轮播）

 

53600d61b11d8d3f4579549decfc9f8e.gif

 

HTML

首先是html内容，布局很简单，一个图片列表，一个点列表，两个按钮。注意data-index使用HTML5中的data-xx属性来嵌入自定义数据（下面JS代码会提到）。记得给默认显示的图片和对应的小圆点加上active类哦。

<div class="wrap"><ul class="list"><li class="item active">0</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li></ul><ul class="pointList"><li class="point active" data-index = 0></li><li class="point" data-index = 1></li><li class="point" data-index = 2></li><li class="point" data-index = 3></li><li class="point" data-index = 4></li></ul><button class="btn" id="leftBtn"> < </button> <button class="btn" id="rightBtn"> > </button>
​</div>

 

CSS

思路：父容器list相对定位，item绝对定位，实现让所有图片重叠在父容器内。利用z-index来设置图片高度，图片高度最高会显示在顶层上。那么整个容器中，左右切换按钮和小圆点始终要在最顶层，不能被图片覆盖，所以他们的z-index一定要比图片高。active是一个样式，给某张图片绑定这个样式就能在最上层显示。然后就是图片切换的渐变效果，opacity完全不透明到透明，再加个transition动画效果。最后就是cursor给小圆点添加“小手指”，其他就没什么好说的了。

<style>.wrap {width: 800px;height: 400px;position: relative;}
​.list {width: 800px;height: 400px;position: relative;padding-left: 0px;}
​.item {width: 100%;height: 100%;list-style: none;position: absolute;left: 0;opacity: 0;transition: all .8s;}
​.item:nth-child(1) {background-color: skyblue;}
​.item:nth-child(2) {background-color: yellowgreen;}
​.item:nth-child(3) {background-color: rebeccapurple;}
​.item:nth-child(4) {background-color: pink;}
​.item:nth-child(5) {background-color: orange;}
​.item.active {z-index: 10;opacity: 1;}
​.btn {width: 60px;height: 100px;z-index: 100;top: 150px;position: absolute;}
​#leftBtn {left: 0px;}
​#rightBtn {right: 0px;}
​.pointList {list-style: none;padding-left: 0px;position: absolute;right: 20px;bottom: 20px;z-index: 200;}
​.point {width: 10px;height: 10px;background-color: antiquewhite;border-radius: 100%;float: left;margin-right: 8px;border-style: solid;border-width: 2px;border-color: slategray;cursor: pointer;  }
​.point.active{background-color: cadetblue;}</style>

 

Javascript

Index可以说是整个代码里面的"核心"，先封装一个清除active的方法，这里面要清除图片的active（显示在最上层），比如切换到下一张图上张图的active就要清除。还有point的active（图片对应小圆点改变样式）。然后goIndex这个方法就是给图片和对应的小圆点同时加上active，左右按钮绑定的方法就不说了。

用getAttribute拿到刚才给li标签绑定的data-index属性，绑定图片index = pointindex，就能实现点击小圆点图片切换了。由于上面goIndex方法早已经绑定好了给图片添加active样式的时候也给小圆点添加的样式了，就可以实现图片切换小圆点跟随变化的效果。

<script>var items = document.querySelectorAll(".item");//图片节点var points = document.querySelectorAll(".point")//点var left = document.getElementById("leftBtn");var right = document.getElementById("rightBtn");var all = document.querySelector(".wrap")var index = 0;var time = 0;//定时器跳转参数初始化​//封装一个清除active方法var clearActive = function () {for (i = 0; i < items.length; i++) {items[i].className = 'item';}for (j = 0; j < points.length; j++) {points[j].className = 'point';}}
​//改变active方法var goIndex = function () {clearActive();items[index].className = 'item active';points[index].className = 'point active'}//左按钮事件var goLeft = function () {if (index == 0) {index = 4;} else {index--;}goIndex();}
​//右按钮事件var goRight = function () {if (index < 4) {index++;} else {index = 0;}goIndex();}​//绑定点击事件监听left.addEventListener('click', function () {goLeft();time = 0;//计时器跳转清零})
​right.addEventListener('click', function () {goRight();time = 0;//计时器跳转清零})
​for(i = 0;i < points.length;i++){points[i].addEventListener('click',function(){var pointIndex = this.getAttribute('data-index')index = pointIndex;goIndex();time = 0;//计时器跳转清零})}//计时器轮播效果var timer;function play(){timer = setInterval(() => {time ++;if(time == 20 ){goRight();time = 0;}    },100)}play();//移入清除计时器all.onmousemove = function(){clearInterval(timer)}//移出启动计时器all.onmouseleave = function(){play();}</script>

总结：这个简单的轮播图实现例子是第一次写最容易理解，逻辑最清晰的一种。下面我把完整的代码块放出来，直接复制粘贴就可以运行。

<!DOCTYPE html>
<html>
​
<head><style>.wrap {width: 800px;height: 400px;position: relative;}
​.list {width: 800px;height: 400px;position: relative;padding-left: 0px;}
​.item {width: 100%;height: 100%;list-style: none;position: absolute;left: 0;opacity: 0;transition: all .8s;}
​.item:nth-child(1) {background-color: skyblue;}
​.item:nth-child(2) {background-color: yellowgreen;}
​.item:nth-child(3) {background-color: rebeccapurple;}
​.item:nth-child(4) {background-color: pink;}
​.item:nth-child(5) {background-color: orange;}
​.item.active {z-index: 10;opacity: 1;}
​.btn {width: 60px;height: 100px;z-index: 100;top: 150px;position: absolute;}
​#leftBtn {left: 0px;}
​#rightBtn {right: 0px;}
​.pointList {list-style: none;padding-left: 0px;position: absolute;right: 20px;bottom: 20px;z-index: 200;}
​.point {width: 10px;height: 10px;background-color: antiquewhite;border-radius: 100%;float: left;margin-right: 8px;border-style: solid;border-width: 2px;border-color: slategray;cursor: pointer;  }
​.point.active{background-color: cadetblue;}</style>
</head>
​
<body><div class="wrap"><ul class="list"><li class="item active">0</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li></ul><ul class="pointList"><li class="point active" data-index = 0></li><li class="point" data-index = 1></li><li class="point" data-index = 2></li><li class="point" data-index = 3></li><li class="point" data-index = 4></li></ul><button class="btn" id="leftBtn"> < </button> <button class="btn" id="rightBtn"> > </button>
​</div><script>var items = document.querySelectorAll(".item");//图片var points = document.querySelectorAll(".point")//点var left = document.getElementById("leftBtn");var right = document.getElementById("rightBtn");var all = document.querySelector(".wrap")var index = 0;var time = 0;//定时器跳转参数初始化​//清除active方法var clearActive = function () {for (i = 0; i < items.length; i++) {items[i].className = 'item';}for (j = 0; j < points.length; j++) {points[j].className = 'point';}}
​//改变active方法var goIndex = function () {clearActive();items[index].className = 'item active';points[index].className = 'point active'}//左按钮事件var goLeft = function () {if (index == 0) {index = 4;} else {index--;}goIndex();}
​//右按钮事件var goRight = function () {if (index < 4) {index++;} else {index = 0;}goIndex();}​//绑定点击事件监听left.addEventListener('click', function () {goLeft();time = 0;//计时器跳转清零})
​right.addEventListener('click', function () {goRight();time = 0;//计时器跳转清零})
​for(i = 0;i < points.length;i++){points[i].addEventListener('click',function(){var pointIndex = this.getAttribute('data-index')index = pointIndex;goIndex();time = 0;//计时器跳转清零})}//计时器var timer;function play(){timer = setInterval(() => {time ++;if(time == 20 ){goRight();time = 0;}    },100)}play();//移入清除计时器all.onmousemove = function(){clearInterval(timer)}//移出启动计时器all.onmouseleave = function(){play();}</script>
</body>
​
</html>

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/675599.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【QT学习十四】 文件目录操作

【QT学习十四】 文件目录操作

目录 一、概述 二、详解 1. QFile QFile 类中的一些静态方法&#xff1a; 使用示例&#xff1a; 注意事项&#xff1a; 2. QDir 成员函数 使用实例&#xff1a; 注意事项&#xff1a; 3. QFileInfo 成员函数 使用实例 4. QTemporaryFile 成员函数 使用实例 注…
阅读更多...
Rust语言之集合

Rust语言之集合

文章目录 一、元组&#xff08;tuple&#xff09;1.元组定义2.元组使用解构索引 3.元组修改非可变元组可变元组类型不一致 二、数组1.数组不可变数组定义可变数组定义数组使用数组修改数组的遍历 2.动态数组-向量&#xff08;Vector&#xff09;向量定义向量遍历向量追加向量插…
阅读更多...
MongoDB聚合： $sort

MongoDB聚合： $sort

聚合的$sort阶段对所有输入文件进行排序&#xff0c;并按排序顺序返回管道。 语法 { $sort: { <field1>: <sort order>, <field2>: <sort order> ... } }$sort阶段参数为一个文档&#xff0c;该文档指定了要排序的字段和相应的排序顺序。<sort or…
阅读更多...
[职场] 公安管理学就业方向及前景 #媒体#笔记#笔记

[职场] 公安管理学就业方向及前景 #媒体#笔记#笔记

公安管理学就业方向及前景 公安管理学是中国普通高等学校本科专业。本专业文理兼收&#xff0c;学制4年&#xff0c;授予法学学士学位。本专业培养掌握马克思主义基本原理&#xff0c;政治坚定&#xff0c;坚持党和国家的路线、方针、政策&#xff0c;具有良好职业素养、科学素…
阅读更多...
获取视频帧图片

获取视频帧图片

在实现了minio文件上传的基础上进行操作 一、编写pom <dependency><groupId>org.jcodec</groupId><artifactId>jcodec</artifactId><version>0.2.5</version> </dependency> <dependency><groupId>org.jcodec<…
阅读更多...
【小程序】基础API——面板API接口介绍

【小程序】基础API——面板API接口介绍

ty.preloadPanel 面板预下载 需引入BizKit&#xff0c;且在>3.0.0版本才可使用 参数 Object object 属性类型默认值必填说明deviceIdstring是设备 idextraInfoPanelExtraParams否额外面板信息 当预下载的是二级面板时, 需要传递的额外信息completefunction否接口调用结束…
阅读更多...
PMP考试之20240209

PMP考试之20240209

1、生物制药公司ClinicaLabs的一位项目经理打算与她的经理讨论为其团队无法执行的复杂活动获取额外资源的问题。一旦活动完成&#xff0c;这些资源将立即投入项目。在这种情况下&#xff0c;项目经理最需要以下哪项技能&#xff1f; A.确定资源需求的规划技能 B.使经理相信她…
阅读更多...
git恢复rebase过程中遇到权限问题和丢失的提交

git恢复rebase过程中遇到权限问题和丢失的提交

文章目录 一、检查丢失的提交是否还在 reflog 中二、创建一个新分支来恢复丢失的提交三、处理权限问题四. 使用 git fsck 查找丢失对象1、创建一个新分支来恢复该提交2、检查和合并提交 五. 介绍git中命令reflog 与 fsck1、git reflog2、git fsck使用场景 一、检查丢失的提交是…
阅读更多...
freesql orm 使用 DynamicFilterInfo 拼接日期查询条件时间格式一个难得的经验

freesql orm 使用 DynamicFilterInfo 拼接日期查询条件时间格式一个难得的经验

文本到时间条件的转换 前端输入 1253-3 , 后台提示"varchar 数据类型到 datetime 数据类型的转换产生一个超出范围的值" 经查询, mssql 【datetime】数据类型&#xff1a;最大是9999年12 月31日&#xff0c;最小是1753年1月1日 所以要拼接限制一下, 只是 if (val.…
阅读更多...
迅为RK3588开发板ubuntu和window互传图形界面直接拖拽进行文件传输

迅为RK3588开发板ubuntu和window互传图形界面直接拖拽进行文件传输

确保以及安装了 VMware Tools。如下图所示表示已安装过了。 和 windows 端文件夹间传输一样直接拖拽进去即可&#xff0c;如下图所示&#xff1a; 也可拖拽到终端&#xff0c;如下图所示&#xff1a; 更多内容可以B站搜索迅为RK3588开发板
阅读更多...
什么是系统工程（字幕）22

什么是系统工程（字幕）22

0 00:00:00,650 --> 00:00:02,660 那么下一个呢&#xff0c;就是 1 00:00:03,200 --> 00:00:04,770 图16.12 2 00:00:05,740 --> 00:00:07,910 这是一个活动图 3 00:00:09,090 --> 00:00:11,930 表达了蒸馏这个水的 4 00:00:12,280 --> 00:00:13,470 过程的…
阅读更多...
一文彻底搞懂Redis的内存回收机制和内存过期淘汰策略

一文彻底搞懂Redis的内存回收机制和内存过期淘汰策略

文章目录 1. Redis内存回收机制2. Redis过期策略3. Redis淘汰策略3.1 LRU算法3.2 缓存清理配置3.3 Redis数据淘汰策略3.4 缓存清理的流程 4. 总结 关于 Redis 内存回收机制和内存过期淘汰策略的常见问题&#xff1a; 什么是 Redis 的内存回收机制&#xff1f; Redis 的内存回收…
阅读更多...
百家cms代审

百家cms代审

环境搭建 源码链接如下所示 https://gitee.com/openbaijia/baijiacms 安装至本地后 直接解压到phpstudy的www目录下即可 接下来去创建一个数据库用于存储CMS信息。&#xff08;在Mysql命令行中执行&#xff09; 接下来访问CMS&#xff0c;会默认跳转至安装界面 数据库名称和…
阅读更多...
原根primitive root

原根primitive root

&#xff08;a,m&#xff09;1&#xff0c;若,则称a为模N的原根。 以下程序只能判断结果为简化剩余系情况下的模N的原根。 对于模4的primitive_root3,模9的primitive_root2,5这些情况无法判断。 def find_primitive_root(n):for base in range(1,n):l[]for index in range(…
阅读更多...
uni使用openlayer加载本机离线地图

uni使用openlayer加载本机离线地图

manifest.json添加配置 "runmode": "liberate"(默认为normal) 把地图打包进apk&#xff0c;这样手机每次访问地图就可以访问到工程文件夹的地图资源了&#xff0c;不用每次都请求云资源&#xff0c;消耗流量太大了
阅读更多...
分治法求解最大子数组和问题

分治法求解最大子数组和问题

leetcode 53 53. 最大子数组和 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 #define max(a,b) ((a)>(b)?(a):(b)) int maxSubArr…
阅读更多...
Huggingface上传模型

Huggingface上传模型

Huggingface上传自己的模型 参考 https://juejin.cn/post/7081452948550746148https://huggingface.co/blog/password-git-deprecationAdding your model to the Hugging Face Hub&#xff0c; huggingface.co/docs/hub/ad…Welcome&#xff0c;huggingface.co/welcome三句指…
阅读更多...
【数据结构】排序之冒泡排序和快速排序

【数据结构】排序之冒泡排序和快速排序

简单不先于复杂&#xff0c;而是在复杂之后。 文章目录 1. 交换排序1.1 冒泡排序1.2 快速排序1.3 快速排序优化1.4 快速排序非递归 1. 交换排序 基本思想&#xff1a;所谓交换&#xff0c;就是根据序列中两个记录键值的比较结果来对换这两个记录在序列中的位置&#xff0c;交换…
阅读更多...
【力扣每日一题】力扣236二叉树的最近公共祖先

【力扣每日一题】力扣236二叉树的最近公共祖先

题目来源 力扣236二叉树的最近公共祖先 题目概述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的…
阅读更多...
VUE2和VUE3区别对比一览

VUE2和VUE3区别对比一览

## Vue3总结 ### 官方文档 * [Vue3](https://v3.cn.vuejs.org/api/options*data.html) * [Vue2](https://vuejs.bootcss.com/api/) ### Vue3相对于Vue2的语法特性#### 1.获取数据 * vue2 javascript export default {data() {return {name: myName,}},mounted() {console.log(t…
阅读更多...
最新文章

Copyright @ 2022~2023