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://xiahunao.cn/news/2775433.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

Open CASCADE学习|求圆的切线与切点

Open CASCADE学习|求圆的切线与切点

在几何学中&#xff0c;一个圆的切线被定义为与圆相切于一点的直线&#xff0c;而该点被称为切点。这意味着切线在切点处与圆仅有一个交点&#xff0c;并且在该点处&#xff0c;切线的方向与圆的半径垂直。 以下是关于圆的切线和切点的一些重要性质&#xff1a; 切线与半径的…
阅读更多...
【开源】SpringBoot框架开发医院门诊预约挂号系统

【开源】SpringBoot框架开发医院门诊预约挂号系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 功能性需求2.1.1 数据中心模块2.1.2 科室医生档案模块2.1.3 预约挂号模块2.1.4 医院时政模块 2.2 可行性分析2.2.1 可靠性2.2.2 易用性2.2.3 维护性 三、数据库设计3.1 用户表3.2 科室档案表3.3 医生档案表3.4 医生放号…
阅读更多...
讯飞星火认知大模型V3.5 python调用 Web API

讯飞星火认知大模型V3.5 python调用 Web API

具体参考 科大讯飞:星火认知大模型Web API文档 目录 1.首先要注册一个 讯飞星火账号&#xff0c;2. 按照自己的业务需求&#xff0c;翻看相关SDK开发文档&#xff0c; 如图1所示。3. 星火认知大模型Web API python示例源码文件共两个*接口请求与接口解析函数&#xff1a;Spark…
阅读更多...
TCP和UDP相关问题(重点)——8.TCP的拥塞控制怎么实现的？

TCP和UDP相关问题(重点)——8.TCP的拥塞控制怎么实现的？

在某段时间内&#xff0c;若对网络中某一资源的需求超过了该资源所能提供的可用部分&#xff0c;网络性能就会变坏&#xff0c;比如在高速公路上行驶的车辆&#xff0c;如果一时期内涌入了太多的车辆&#xff0c;道路将变得拥堵&#xff0c;交通状况变差。网络中也是一样&#…
阅读更多...
Quartus工程的qsf配置约束文件介绍

Quartus工程的qsf配置约束文件介绍

一、qsf文件概述 qsf&#xff1a;Quartus Setting File&#xff0c;是Quartus工程的配置文件&#xff1b; 包含一个Quartus工程的所有约束&#xff0c;包括工程的软件版本信息、FPGA器件信息、引脚约分配、引脚电平分配&#xff0c;编译约束和用于Classic TimingAnalyzer的时…
阅读更多...
MATLAB环境下基于深层小波时间散射网络的ECG信号分类

MATLAB环境下基于深层小波时间散射网络的ECG信号分类

2012年&#xff0c;法国工程学院院士Mallat教授深受深度学习结构框架思想的启发&#xff0c;提出了基于小波变换的小波时间散射网络&#xff0c;并以此构造了小波时间散射网络。 小波时间散射网络的结构类似于深度卷积神经网络&#xff0c;不同的是其滤波器是预先确定好的小波…
阅读更多...
DMA直接内存访问，STM32实现高速数据传输使用配置

DMA直接内存访问，STM32实现高速数据传输使用配置

1、DMA运用场景 随着智能化、信息化的不断推进&#xff0c;嵌入式设备的数据处理量也呈现指数级增加&#xff0c;因此对于巨大的数据量处理的情况时&#xff0c;必须采取其它的方式去替CPU减负&#xff0c;以保证嵌入式设备性能。例如SD卡存储器和音视频、网络高速通信等其它情…
阅读更多...
Vue中 常用的修饰符有哪些

Vue中 常用的修饰符有哪些

Vue是一款建立在JavaScript框架上的开源前端库&#xff0c;已经成为当今前端开发人员最喜爱的选择之一。它的简洁语法和强大的功能使得开发者可以轻松地构建交互性的网页应用程序。在Vue中&#xff0c;修饰符是一个重要的概念&#xff0c;它们可以帮助我们更好地控制和定制DOM元…
阅读更多...
【数据结构】二叉树的顺序结构及链式结构

【数据结构】二叉树的顺序结构及链式结构

目录 1.树的概念及结构 1.1树的概念 1.2树的相关概念 ​编辑 1.3树的表示 1.4树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 2.二叉树概念及结构 2.1二叉树的概念 2.2现实中的二叉树 ​编辑 2.3特殊的二叉树 2.4二叉树的性质 2.5二叉树的存储结…
阅读更多...
c++新特性override和final

c++新特性override和final

override 作用: 在子类中重写父类的虚函数&#xff0c;我们可以在子类的虚函数声明后加上override。 上图就在重写eat()的时候&#xff0c;加上override。 作用: 1. 可以提示读者&#xff0c;这个函数是重写自父类中的。 2. 加上override之后&#xff0c;我们在重…
阅读更多...
数据库管理-第148期 最强Oracle监控EMCC深入使用-05（20240208）

数据库管理-第148期 最强Oracle监控EMCC深入使用-05（20240208）

数据库管理148期 2024-02-08 数据库管理-第148期 最强Oracle监控EMCC深入使用-05&#xff08;20240208&#xff09;1 性能主页2 ADDM Spotlight3 实时ADDM4 数据库的其他5 主机总结 数据库管理-第148期 最强Oracle监控EMCC深入使用-05&#xff08;20240208&#xff09; 作者&am…
阅读更多...
实例分割论文阅读之：FCN：《Fully Convolutional Networks for Semantica Segmentation》

实例分割论文阅读之：FCN：《Fully Convolutional Networks for Semantica Segmentation》

论文地址:https://openaccess.thecvf.com/content_cvpr_2015/papers/Long_Fully_Convolutional_Networks_2015_CVPR_paper.pdf 代码链接&#xff1a;https://github.com/pytorch/vision 摘要 卷积网络是强大的视觉模型&#xff0c;可以产生特征层次结构。我们证明&#xff0c…
阅读更多...
Python解决SSL不可用问题

Python解决SSL不可用问题

参考&#xff1a;https://blog.csdn.net/weixin_44894162/article/details/126342591 一、问题描述&#xff1a; 报错概述&#xff1a; WARNING: pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available. ## 警告:pip配…
阅读更多...
Project 2019下载安装教程，保姆级教程，附安装包和工具

Project 2019下载安装教程，保姆级教程，附安装包和工具

前言 Project是一款项目管理软件&#xff0c;不仅可以快速、准确地创建项目计划&#xff0c;而且可以帮助项目经理实现项目进度、成本的控制、分析和预测&#xff0c;使项目工期大大缩短&#xff0c;资源得到有效利用&#xff0c;提高经济效益。软件设计目的在于协助专案经理发…
阅读更多...
ubuntu原始套接字多线程负载均衡

ubuntu原始套接字多线程负载均衡

原始套接字多线程负载均衡是一种在网络编程中常见的技术&#xff0c;特别是在高性能网络应用或网络安全工具中。这种技术允许应用程序在多个线程之间有效地分配和处理网络流量&#xff0c;提高系统的并发性能。以下是关于原始套接字多线程负载均衡技术的一些介绍&#xff1a; …
阅读更多...
交通 | 共乘出行（下）：基于图结构的动态多时空供需网络的均衡度量方法

交通 | 共乘出行（下）：基于图结构的动态多时空供需网络的均衡度量方法

博客&#xff1a;Alex Chin, & Tony Qin. (2023.02.25). Quantifying Efficiency in Ridesharing Marketplaces. Link: https://eng.lyft.com/quantifying-efficiency-in-ridesharing-marketplaces-affd53043db2 论文&#xff1a;Chin, Alex, and Zhiwei Qin. “A Unified…
阅读更多...
Springboot根据环境读取application配置文件

Springboot根据环境读取application配置文件

目录 1. 首先创建两个不同配置文件 2. pom.xml 配置文件 3. 指定环境 4. 最后启动测试 1. 首先创建两个不同配置文件 分别为开发环境和生产环境 application-dev.properties 和 application-prod.properties application-dev.properties 配置为 1931 端口 application-pro…
阅读更多...
CAN通讯协议详解

CAN通讯协议详解

阅读引言&#xff1a; 本篇博文想给需要的人介绍一下CAN总线&#xff0c; 这个也算是我从B站学习记得笔记分享吧也算是。简单的介绍了CAN总线的大致内容&#xff0c; 简述支持CAN功能的STM32的简单使用例程。本视频的中的图片内容均来自B站爱上半导体博主的内容。 CAN高质量教学…
阅读更多...
问题：在填制记账凭时，应注意以下几个方面：（ ） #知识分享#其他

问题：在填制记账凭时，应注意以下几个方面：（ ） #知识分享#其他

问题&#xff1a;在填制记账凭时&#xff0c;应注意以下几个方面&#xff1a;&#xff08; &#xff09; A:记账凭证各项内容必须完整 B:必须以审核无误的原始凭证为依据 C:记账凭证应连续编号 D:记账凭证的书写应清楚、规范。 参考答案如图所示
阅读更多...
C++算法之双指针、BFS和图论

C++算法之双指针、BFS和图论

一、双指针 1.AcWing 1238.日志统计 分析思路 前一区间和后一区间有大部分是存在重复的 我们要做的就是利用这部分 来缩短我们查询的时间 并且在使用双指针时要注意对所有的博客记录按时间从小到大先排好顺序 因为在有序的区间内才能使用双指针记录两个区间相差 相当于把一个…
阅读更多...
最新文章

Copyright @ 2022~2023