阅读量:0
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"; // 当前图片指示器背景颜色为aqua dots[k - 1].style.background = "pink"; // 上一张图片指示器背景颜色为pink } else if (k == dots.length) { dots[0].style.background = "aqua"; // 第一张图片指示器背景颜色为aqua dots[k - 1].style.background = "pink"; // 最后一张图片指示器背景颜色为pink k = 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"; // 当前图片指示器背景颜色为aqua dots[0].style.background = "pink"; // 第一张图片指示器背景颜色为pink }, 10); } else { carousel.style.transition = "all 1s"; // 添加过渡效果 carsoule.style.marginLeft = "-" + imgwidth * k + "px"; // 设置轮播图容器的左边距 dots[k].style.background = "aqua"; // 当前图片指示器背景颜色为aqua dots[k + 1].style.background = "pink"; // 下一张图片指示器背景颜色为pink } } </script>