JavaScript轮播图

HTML部分

<div class="box" onmouseover="over()" onmouseout="noover()"><img src="./img/zuo.png" alt="" class="left_arrow" onclick="left_last()"><img src="./img/yy.png" alt="" class="right_arrow" onclick="right_word()"><div id="carousel"></div><div class="round"></div></div>

JavaScript部分:携带注释哟家人们

<script>let data; // 声明一个变量用于存储从服务器获取的数据let k = 0; // 当前显示的图片索引let imgwidth; // 图片宽度let imgheight; // 图片高度let inter; // 用于存储定时器的变量// 创建一个XMLHttpRequest对象用于发送请求let xhr = new XMLHttpRequest();// 设置请求方式和请求地址xhr.open('get', './js/banner.json', true);// 发送请求xhr.send();// 接收返回的响应数据xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {let text = xhr.responseText;// 将获取的文本数据转换为JSON格式data = JSON.parse(text);// 调用展示图片的函数console.log(data); // 打印获取到的数据到控制台// 调用展示图片的函数show(data);}};// 获取轮播图容器元素let carsoule = document.getElementById('carousel');function show(data) {let str = ``; // 声明一个空字符串用于存储要渲染的图片标签let sti = ``; // 声明一个空字符串用于存储轮播图指示器的标签for (let i = 0; i < data.imge.length; i++) {// 渲染图片到页面中str += `<img src="${data.imge[i]}" alt="" class="img_carousel">`;// 根据索引,渲染轮播图指示器if (i == 0) {sti += `<div style="background-color: aqua;"></div>`;} else {sti += `<div></div>`;}}// 将最后一张图片再次添加到轮播图容器中,用于实现循环播放str += `<img src="${data.imge[0]}" alt="">`;// 将图片和轮播图指示器渲染到页面中document.getElementById('carousel').innerHTML = str;document.getElementsByClassName('round')[0].innerHTML = sti;// 获取第一张图片的宽度imgwidth = document.getElementsByClassName('img_carousel')[0].offsetWidth;// 调用轮播功能noover();}// 获取轮播图指示器的所有子元素let dots = document.getElementsByClassName('round')[0].children;// 下一张图片函数function next() {k++; // 索引加1,显示下一张图片carsoule.style.marginLeft = "-" + imgwidth * k + "px"; // 设置轮播图容器的左边距carousel.style.transition = "margin-left 1s"; // 设置过渡效果// 如果达到最后一张图片,回到第一张图片if (k == data.imge.length) {setTimeout(function() {carousel.style.transition = "none"; // 去掉过渡效果k = 0; // 将索引设置为0,回到第一张图片carousel.style.marginLeft = `-${k * 100}%`; // 设置轮播图容器的左边距}, 1000);}// 根据索引,设置轮播图指示器的样式if (k < dots.length) {dots[k].style.background = "aqua"; // 当前图片指示器背景颜色为aquadots[k - 1].style.background = "pink"; // 上一张图片指示器背景颜色为pink} else if (k == dots.length) {dots[0].style.background = "aqua"; // 第一张图片指示器背景颜色为aquadots[k - 1].style.background = "pink"; // 最后一张图片指示器背景颜色为pinkk = 0; // 将索引设置为0,回到第一张图片}}// 自动轮播函数function noover() {inter = setInterval(next, 2000); // 每2秒调用一次next函数,实现自动轮播}// 鼠标悬停在轮播图上,停止自动轮播function over() {clearInterval(inter); // 清除定时器,停止自动轮播}// 获取右箭头元素let right = document.getElementsByClassName('right_arrow')[0];// 点击右箭头切换到下一张图片function right_word() {right.onclick = null; // 防止连续点击next(); // 调用下一张图片函数// 1.5秒后恢复右箭头的点击事件setTimeout(function() {right.onclick = right_word;}, 1500);}// 获取左箭头元素// let left = document.getElementsByClassName('left_arrow')[0];// 点击左箭头切换到上一张图片function left_last() {k--; // 索引减1,显示上一张图片// 如果索引小于0,回到最后一张图片if (k < 0) {k = dots.length; // 将索引设置为指示器数量,显示最后一张图片carousel.style.transition = ""; // 去掉过渡效果carsoule.style.marginLeft = "-" + imgwidth * k + "px"; // 设置轮播图容器的左边距// 0.01秒后,过渡效果生效,显示倒数第二张图片setTimeout(function() {k--; // 索引减1,显示倒数第二张图片carousel.style.transition = "all 1s"; // 添加过渡效果carsoule.style.marginLeft = "-" + imgwidth * k + "px"; // 设置轮播图容器的左边距dots[k].style.background = "aqua"; // 当前图片指示器背景颜色为aquadots[0].style.background = "pink"; // 第一张图片指示器背景颜色为pink}, 10);} else {carousel.style.transition = "all 1s"; // 添加过渡效果carsoule.style.marginLeft = "-" + imgwidth * k + "px"; // 设置轮播图容器的左边距dots[k].style.background = "aqua"; // 当前图片指示器背景颜色为aquadots[k + 1].style.background = "pink"; // 下一张图片指示器背景颜色为pink}}</script>

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

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

相关文章

【JAVA多线程】线程的状态控制

目录 1.JDK中的线程状态 2.基础操作 2.1关闭 2.2中断 2.3.等待、唤醒 2.4.阻塞、唤醒 1.JDK中的线程状态 在JDK的线程体系中线程一共6种状态&#xff1a; NEW&#xff08;新建&#xff09;: 当线程对象创建后&#xff0c;但尚未启动时&#xff0c;线程处于新建状态。RUN…

python毕业设计选题校园食堂菜谱推荐系统

✌网站介绍&#xff1a;✌10年项目辅导经验、专注于计算机技术领域学生项目实战辅导。 ✌服务范围&#xff1a;Java(SpringBoo/SSM)、Python、PHP、Nodejs、爬虫、数据可视化、小程序、安卓app、大数据等设计与开发。 ✌服务内容&#xff1a;免费功能设计、免费提供开题答辩P…

stack(leetcode练习题,牛客)

文章目录 STL用法总结32 最长有效括号思路代码 496 下一个最大元素思路代码 856 括号的分数思路 最优屏障思路代码 STL用法总结 关于stack的知识&#xff0c;可以看点击查看上面的博客&#xff0c;以下题目前三个全在leetcode&#xff0c;最后一个在牛客 32 最长有效括号 思路…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第五十章 Linux设备树

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

C++类别(建构函数、初值串列、EXPLICIT指示词)

类别- 类别(class) 是物件(object) 的模板&#xff0c;物件的所有功能都由类别设置。 典型的类别设计如下 class class_name { access_label_1:// memberaccess_label_2:// member }; 利用关键字(keyword) class宣告类别名称&#xff0c;其后的大括弧为类别的宣告内容&…

代理IP在数据采集中具体有哪些作用

在当今信息化高速发展的时代&#xff0c;从市场趋势分析到消费者行为预测&#xff0c;从产品优化到服务改进&#xff0c;大数据都在其中扮演着不可或缺的角色。但数据的采集、整理和分析并非易事&#xff0c;特别是在面对海量的网络数据时&#xff0c;我们往往需要借助一些技术…

python3.12 String类方法大全

字符串相关链接 类型细分与链接注释 字面值 转义字符字符串字符串基础方法拼接, 索引, 路径, 长字符串分行等等内置类型str 字符串的方法 见下表 printf 风格的字符串格式化 format % values 标准库string 字符串常量字符串模块中定义的常量class string.Formatter 自定义字符…

前端 SSE 长连接

使用 const options {withCredentials: true, // 默认 false}const eventSource new EventSource(/api, options);eventSource.addEventListener(open, () > {});eventSource.onmessage (event) > {}; // 或addEventListener(message,callback)eventSource.addEvent…

程序员拔火罐技能的分享

一.背景 之前为了考“中医康复理疗师”的证书&#xff0c;自学了拔火罐。自学主要是在自己大腿上练习&#xff0c;然后拿家人做小白鼠。后来考试没有那么严格也就顺利通过了。操作过程中&#xff0c;积累的一些小知识&#xff0c;分享给大家&#xff0c;有空在家里给家人服务体…

CTF ssrf 基础入门 (一)

0x01 引言 我发现我其实并不是很明白这个东西&#xff0c;有些微妙&#xff0c;而且记忆中也就记得Gopherus这个工具了&#xff0c;所以重新学习了一下&#xff0c;顺便记录一下吧 0x02 辨别 我们拿到一个题目&#xff0c;他的名字可能就是题目类型&#xff0c;但是也有可能…

【CSS】继承属性

属性继承 1. 字体系列属性 字体系列属性主要包括&#xff1a; font-size、font-family、font-variant、font-style、font-weight、font、letter-spacing、word-spacing、text-transform 和 line-height。如果没有在⼀个元素上设置这些属性&#xff0c;则其继承上层的相应属性…

FastAPI(七十三)实战开发《在线课程学习系统》接口开发-- 回复留言

源码见&#xff1a;"fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 之前文章分享FastAPI&#xff08;七十二&#xff09;实战开发《在线课程学习系统》接口开发-- 留言列表开发&#xff0c;这次我们分享如何回复留言 按…

Jenkins+Gitlab持续集成综合实战

一、持续集成应用背景&#xff1a; DevOps&#xff1a;&#xff08;英文Development&#xff08;开发&#xff09;和Operations&#xff08;技术运营&#xff09;的组合&#xff09;是一组过程、方法与系统的统称&#xff0c;用于促进开发&#xff08;应用程序/软件工程&#…

NCRE3 2-1 网络总体设计基本方法

这部分记忆的比较多 概览 设计网络建设总体目标确定网络系统方案设计原则网络系统总体设计设计网络拓扑结构进行网络设备选型网络系统安全设计 设计网络建设总体目标 这部分视频没说到 确定网络系统方案设计原则 这部分视频没说到 网络系统总体设计 核心层网络结构设计 …

Mysql的MHA

Mysql的MHA 一、MHA 1、什么是MHA&#xff1f; 高可用模式下的故障切换&#xff0c;基于主从复制 单点故障和主从复制不能切换的问题 至少需要3台 故障切换过程0~30秒 vip地址&#xff0c;根据vip地址所在的主机&#xff0c;确定主备 主 vip 备 vip 主和备不是优先确定…

嵌入式Linux八股(四)——MCURTOS

嵌入式Linux八股完整文章目录 嵌入式Linux八股&#xff08;一&#xff09;——语言篇_嵌入式软件八股-CSDN博客 嵌入式Linux八股&#xff08;二&#xff09;——Linux_linux嵌入式的八股文有哪些-CSDN博客 嵌入式Linux八股&#xff08;三&#xff09;——计算机基础_嵌入式哪…

DM(DataMart)增量表

DM&#xff08;DataMart&#xff09;增量表通常指的是在数据仓库或数据集市中的增量表。这些表格用于存储每日或每周等时间段内新增的数据&#xff0c;以便在后续的分析和报告中使用。 特点和作用&#xff1a; 1.存储增量数据&#xff1a;DM增量表存储了相对于上一次抽取或加载…

【Vue实战教程】之Vue工程化项目详解

Vue工程化项目 随着多年的发展&#xff0c;前端越来越模块化、组件化、工程化&#xff0c;这是前端发展的大趋势。webpack是目前用于构建前端工程化项目的主流工具之一&#xff0c;也正变得越来越重要。本章节我们来详细讲解一下如何使用webpack搭建Vue工程化项目。 1 使用we…

基于Python的哔哩哔哩国产动画排行数据分析系统

需要本项目的可以私信博主&#xff0c;提供完整的部署、讲解、文档、代码服务 随着经济社会的快速发展&#xff0c;中国影视产业迎来了蓬勃发展的契机&#xff0c;其中动漫产业发展尤为突出。中国拥有古老而又璀璨的文明&#xff0c;仅仅从中提取一部分就足以催生出大量精彩的…

【C# 】 一个List<T> 如何快速的知道里面的最大、最小、平均值呢?

在C#中&#xff0c;要从一个List<T>中找到最大值、最小值和平均值&#xff0c;首先需要确保列表中的元素类型支持这些操作&#xff08;例如int、ushort或double&#xff09;。 这里使用LINQ&#xff08;Language Integrated Query&#xff09;来简化这些计算。 如果使用…