JavaScript 实现轮播图功能

发布时间:2026/10/1 6:01:51

JavaScript 实现轮播图功能 自动轮播图片按照设定的时间间隔自动切换实现循环播放。箭头控制用户可以通过点击左右箭头手动切换图片控制轮播的方向。小圆点指示在轮播图下方显示小圆点指示当前显示的图片位置鼠标交互当鼠标悬停在轮播图上时自动轮播暂停鼠标移开后自动轮播恢复。HTML 结构div classbanner_box onmouseoverhover() onmouseouthoverout()div classbanner_arrowsimg src./img/箭头左.png classleft alt onclickleft()/img src./img/箭头右.png classright alt onclickright()//divdiv classbanner_img/divdiv classbanner_dot/div/divscript srcjs/banner.js/scriptAI写代码html这段 HTML 代码构建了轮播图的基本结构。banner_box是轮播图的容器banner_arrows包含左右箭头图片banner_img用于展示轮播的图片banner_dot则是放置小圆点的区域。同时通过onmouseover和onmouseout事件绑定了鼠标悬停和移开的函数。css样式*{margin: 0;padding: 0;}.banner_box{position: relative;width: 48%;margin-left: 20%;margin-top: 5%;background-color: aqua;overflow: hidden;}.banner_arrows {width: 100%;height: 300px;position: absolute;z-index: 5;display: flex;justify-content: space-between;align-items: center}.banner_arrows img {width: 8%;height: 15%;cursor: pointer;/* 当鼠标悬停在图片上时显示小手 */}.banner_img{width: 100%;height: 300px;display: flex;}.banner_img img{width: 100%;height: 300px;float: left;}.banner_dot{position: absolute;/* background-color: brown; */width: 25%;height: 50px;bottom: 0px;left: 40%;}span{background-color: pink;float: left;display: block;width: 30px;height: 30px;margin-left: 5px;border-radius: 50%;}AI写代码cssCSS 样式主要用于设置轮播图的布局和外观。banner_box设置为相对定位并设置了宽度、边距和背景颜色同时overflow: hidden确保超出容器的图片部分不会显示。banner_arrows是绝对定位位于轮播图上方包含左右箭头图片并设置了箭头的样式和鼠标悬停效果。banner_img使用display: flex来排列图片banner_dot用于放置小圆点设置了小圆点的样式和位置。js逻辑let body document.getElementsByClassName(banner_img)[0];let round document.getElementsByClassName(banner_dot)[0];let bot document.getElementsByTagName(span);// 定时器let inter;// 数据let data;// 下标let index 0;// 生成一个 XMLHttpRequest 对象let xhr new XMLHttpRequest();// open请求类型是get请求地址文件位置写的是json文件请求方式是true。表示是异步xhr.open(get, js/banner.json, true);// 接着发送请求xhr.send();// 该方法可以定义响应执行函数当 readyState 属性发// 生变化时会自动调用该方法。xhr.onreadystatechange function() {// ready是交互流程。5个阶段if判断中意思是// 交互流程是否达到第五个阶段并且状态等于200请求成功if (xhr.readyState 4 xhr.status 200) {// 响应文本返回的数据let text xhr.responseText;// 把返回的json数据转换并赋值到data变量data JSON.parse(text);console.log(data);index 0;reader();bot[index].style.backgroundColor red;inter setInterval(auto, 2000);}};// 渲染函数function reader() {let str ;for (let i 0; i data.length; i) {str img src${data[i]} alt /;}str img src${data[0]} alt /;console.log(str);let strs ;for (let i 0; i data.length; i) {strs span/span;}round.innerHTML strs;body.innerHTML str;}// 自动轮播function auto() {index;body.style.transition all 1s;body.style.marginLeft -index * 100 %;// console.log(index);// bot[ bot.length-1].style.backgroundColor pinkconsole.log(index, data.length);if (index data.length) {index 0;setTimeout(function() {body.style.marginLeft -index * 100 %;body.style.transition none;}, 1000)bot[0].style.backgroundColor red;bot[bot.length - 1].style.backgroundColor pink;} else {bot[index].style.backgroundColor red;bot[index - 1].style.backgroundColor pink;}}// 鼠标放置到轮播图上时// 清除定时器function hover() {clearInterval(inter);}// 鼠标移开时// 重新设置定时器function hoverout() {inter setInterval(auto, 2000);}// 右箭头function right() {auto();document.getElementsByClassName(right)[0].onclick null;setTimeout(function() {document.getElementsByClassName(right)[0].onclick right;}, 1000);}// 左箭头function left() {document.getElementsByClassName(left)[0].onclick null;// 首先判断图片下标是否为0if (index 0) {// 如果为0那就让下标等于图片的长度最后一张index data.length;// 并将图片切换到最后一张过渡为nonebody.style.transition none;body.style.marginLeft -(data.length) * 100 %;}// 然后设一个一次性的定时器时间短一些setTimeout(function() {// 下标--index--;body.style.transition all 1s;body.style.marginLeft -index * 100 %;// console.log(index);bot[0].style.backgroundColor pinkconsole.log(index, data.length);if (index data.length - 1) {bot[index].style.backgroundColor red;bot[0].style.backgroundColor pink;} else {bot[index].style.backgroundColor red;bot[index 1].style.backgroundColor pink;}}, 10);setTimeout(function() {document.getElementsByClassName(left)[0].onclick left;}, 1000);}AI写代码javascript运行代码解释数据从js/banner.json文件中获取图片数据并将其解析为 JavaScript 对象。获取数据成功后调用reader函数渲染轮播图并设置初始的小圆点样式和启动自动轮播定时器。渲染函数reader遍历图片数据生成包含图片img标签的字符串并在最后添加一张与第一张相同的图片用于实现无缝循环。同时生成小圆点的span标签字符串并将它们分别插入到banner_img和banner_dot中。自动轮播函数auto每次调用时index自增通过改变body的marginLeft属性来移动图片实现图片的切换。当index达到图片数量时重置index为 0过渡效果也清除并使用setTimeout设置一个过渡效果实现无缝循环。同时更新小圆点的背景颜色指示当前显示的图片。鼠标移动函数hover和hoverouthover函数在鼠标悬停时清除自动轮播定时器暂停自动轮播hoverout函数在鼠标移开时重新启动自动轮播定时器恢复自动轮播。箭头控制函数right和leftright函数调用auto函数实现向右切换图片并在切换后暂停箭头的点击事件1 秒后恢复。为了防止用户短时间内多次点击left函数在点击左箭头时先判断index是否为 0若为 0 则将index设置为图片数量切换到最后一张图片然后通过setTimeout逐步切换到前一张图片并更新小圆点的背景颜色。同样在切换后暂停箭头的点击事件1 秒后恢复。通过以上代码我们就能实现一个日常且实用好看的轮播图效果了。————————————————版权声明本文为CSDN博主「好青崧」的原创文章遵循CC 4.0 BY-SA版权协议转载请附上原文出处链接及本声明。原文链接https://blog.csdn.net/jht_520/article/details/147201002
延伸阅读

更多相关文章

2026/9/23 4:01:16

Zabbix Proxy

一、Proxy的好处 代替Server去本地局域网采集Agent数据;如果Proxy和Server网络断了,采集到的数据存在Proxy本地数据库,网络恢复后批量上传,监控数据不丢失;实现大规模分布式监控。 二、proxy部署 新开一个虚拟机做pro…

2026/9/26 21:24:31

Kubernetes InitContainer:原理、应用场景与最佳实践详解

1. 项目概述:为什么需要初始化容器? 在Kubernetes的世界里,Pod是调度的基本单位,我们通常会把一个或多个关系紧密的容器打包进同一个Pod里,让它们共享网络和存储。但你是否遇到过这样的场景:你的主应用容器…

2026/10/1 6:01:34

Jev哑巴模型详解:从申请密钥到接入Codex实战

最近有件事挺有意思,群里好几个朋友不约而同跑来问我同一个问题:Jev到底是什么?后面还跟着一个听起来不太像夸人的外号——哑巴模型。我最初以为是某个开源项目的缩写,点进去看了一眼才发现,事情比想象的有意思。Jev本…

2026/10/1 6:01:34

GitHub热榜观察:Agent、computer-use与自托管环境的落地实践

GitHub Trending 这事儿我基本每天都会刷一遍,倒不是单纯追新,而是热榜在很大程度上能反映出一段时间内开发者的真实关注点。9.22 这期热榜我印象挺深,Agent 框架、computer-use、自托管环境这几个方向集中冒头,不是孤立现象&…

2026/10/1 6:01:34

PyTorch DCGAN 实现二次元头像生成实战指南

简介:本资源是一个基于PyTorch实现的DCGAN二次元头像生成项目,专为深度学习初学者与PyTorch实践者设计,聚焦图像生成核心任务,兼顾理论理解与工程落地。压缩包共3478个文件,主体为3464张高质量二次元头像训练图&#x…

2026/10/1 5:21:14

东莞市品牌网站建设报价常见报错与解决

东莞品牌网站建设报价单背后:一份保姆级建站教程避坑实录 网站做好了没人访问,这大概是很多老板最头疼的事。花了大几万做的品牌站,上线后流量惨淡,比路边摊还冷清。别急着骂外包公司,很多“东莞品牌网站建设报价”里藏着不少猫腻,比如用模板站冒充定制…

2026/9/29 21:48:03

如何划分训练/验证集:Spirula Studio五种eval_mode策略详解

如何划分训练/验证集:Spirula Studio五种eval_mode策略详解 【免费下载链接】spirula-studio Cross-vendor 3D Gaussian Splatting trainer - video to splat to mesh, Vulkan or CUDA. 项目地址: https://gitcode.com/GitHub_Trending/sp/spirula-studio Sp…

2026/9/29 7:00:49

SEO怎么推广速查手册新手避坑实战指南

SEO怎么推广速查手册新手避坑实战指南 模板网站太丑不够用?别急着加滤镜,那是治标不治本。很多老板盯着后台流量掉得眼红,却还在纠结首页Banner的圆角是不是3像素。这就像穿着西装去挖土,姿势不对,努力白费。我整理这份 速查手册…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑