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 成员函数 使用实例 注…
阅读更多...
[职场] 公安管理学就业方向及前景 #媒体#笔记#笔记

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

公安管理学就业方向及前景 公安管理学是中国普通高等学校本科专业。本专业文理兼收&#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<…
阅读更多...
迅为RK3588开发板ubuntu和window互传图形界面直接拖拽进行文件传输

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

确保以及安装了 VMware Tools。如下图所示表示已安装过了。 和 windows 端文件夹间传输一样直接拖拽进去即可&#xff0c;如下图所示&#xff1a; 也可拖拽到终端&#xff0c;如下图所示&#xff1a; 更多内容可以B站搜索迅为RK3588开发板
阅读更多...
百家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;消耗流量太大了
阅读更多...
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 的…
阅读更多...
Netty的序列化之MessagePack

Netty的序列化之MessagePack

目录 引入MessagePack依赖 实体类 服务端代码 客户端代码 执行结果 引入MessagePack依赖 <dependency><groupId>org.msgpack</groupId><artifactId>msgpack</artifactId><version>0.6.12</version></dependency> 实体类…
阅读更多...
Stable Diffusion教程——使用TensorRT GPU加速提升Stable Diffusion出图速度

Stable Diffusion教程——使用TensorRT GPU加速提升Stable Diffusion出图速度

概述 Diffusion 模型在生成图像时最大的瓶颈是速度过慢的问题。为了解决这个问题&#xff0c;Stable Diffusion 采用了多种方式来加速图像生成&#xff0c;使得实时图像生成成为可能。最核心的加速是Stable Diffusion 使用了编码器将图像从原始的 3512512 大小转换为更小的 46…
阅读更多...
Python爬虫http基本原理#2

Python爬虫http基本原理#2

Python爬虫逆向系列&#xff08;更新中&#xff09;&#xff1a;http://t.csdnimg.cn/5gvI3 HTTP 基本原理 在本节中&#xff0c;我们会详细了解 HTTP 的基本原理&#xff0c;了解在浏览器中敲入 URL 到获取网页内容之间发生了什么。了解了这些内容&#xff0c;有助于我们进一…
阅读更多...
雨云2h2g香港二区云服务器测评（纯测评）

雨云2h2g香港二区云服务器测评（纯测评）

购买并且重装好系统后&#xff0c;来itdog去ping一下看看延迟怎么样。&#xff08;香港无移动屏蔽&#xff09;&#xff1a; 然后&#xff0c;我们来做一个线路路由测试&#xff08;去回程路由测试&#xff09;。&#xff08;雨云香港服务器IP不是原生IP&#xff0c;而是广播IP…
阅读更多...
【Python】使用 requirements.txt 与 pytorch 相关配置

【Python】使用 requirements.txt 与 pytorch 相关配置

【Python】使用 requirements.txt 与 pytorch 相关配置 前言一、pip1、导出结果含有路径2、导出不带路径的 二、Conda1、导出requirements.txt2、导出yml 文件 三、第三方包&#xff1a;pipreqs&#xff08;推荐&#xff09;1、创建并激活conda环境2、安装requirements文件的pi…
阅读更多...
Ubuntu22.04 gnome-builder gnome C 应用程序习练笔记(三)

Ubuntu22.04 gnome-builder gnome C 应用程序习练笔记(三)

八、ui窗体创建要点 .h文件定义(popwindowf.h)&#xff0c; TEST_TYPE_WINDOW宏是要创建的窗口样式。 #pragma once #include <gtk/gtk.h> G_BEGIN_DECLS #define TEST_TYPE_WINDOW (test_window_get_type()) G_DECLARE_FINAL_TYPE (TestWindow, test_window, TEST, WI…
阅读更多...
Quorum NWR算法，鱼和熊掌也可兼得

Quorum NWR算法，鱼和熊掌也可兼得

众所周知在分布式系统中CAP&#xff0c;一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;、分区容错性&#xff08;Partition Tolerance&#xff09;三个指标不可兼得&#xff0c;只能在三个指标中选择两个。假如此时已经实现了一套AP型…
阅读更多...
C#上位机与三菱PLC的通信05--MC协议之QnA-3E报文解析

C#上位机与三菱PLC的通信05--MC协议之QnA-3E报文解析

1、MC协议回顾 MC是公开协议 &#xff0c;所有报文格式都是有标准 &#xff0c;MC协议可以在串口通信&#xff0c;也可以在以太网通信 串口&#xff1a;1C、2C、3C、4C 网口&#xff1a;4E、3E、1E A-1E是三菱PLC通信协议中最早的一种&#xff0c;它是一种基于二进制通信协…
阅读更多...
day7(2024/2/8)

day7(2024/2/8)

mainui.h(第二个界面) #ifndef MAINUI_H #define MAINUI_H#include <QWidget>namespace Ui { class MainUi; }class MainUi : public QWidget {Q_OBJECTpublic:explicit MainUi(QWidget *parent nullptr);~MainUi();public slots:void main_ui();private:Ui::MainUi *u…
阅读更多...
Rust 格式化输出

Rust 格式化输出

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、format! 宏二、fmt::Debug三、fmt::Display四、? 操作符 循环打印 前言 Rust学习系列-本文根据教程学习Rust的格式化输出&#xff0c;包括fmt::Debug&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023