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