轮播图代码示例 - 完整教程及注释
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title><!-- 基础样式 --><style>* {margin: 0;padding: 0;}
<p>/* 定总体范围 <em>/.wrap {top: 100px;width: 1000px;height: 460px;background-color: rgb(29, 26, 21);margin: 0 auto;position: relative;background-size: cover;background-position: center center;}
/</em> 左右键基本样式 */.arrow {position: absolute;top: 210px;}
/*左键与图框距离 <em>/.prev {left: 20px;}
/<em>右键与图框距离 <em>/.next {right: 20px;}
/</em> 底部索引栏样式 <em>/.dots {width: 150px;height: 20px;background-color: rgba(28, 10, 10, 0.7);position: absolute;bottom: 20px;left: 450px;display: flex;justify-content: space-around;/</em> 内部圆点间隔相同排布</em>/align-items: center;}
/</em> 选中点的样式 */.dot {width: 10px;height: 10px;background-color: rgba(255, 255, 255, .7);border-radius: 50%;}
.now {background-color: #fff;}</style></head><body><div class="wrap"><div class="arrow prev"><!-- 左键按钮 --><button><!-- 使用了网上找到的左箭头图标 --><?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667322883119" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4077" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50"><path d="M712.166667 86.96A21.333333 21.333333 0 0 1 725.333333 106.666667v853.333333a21.333333 21.333333 0 0 1-36.42 15.086667l-426.666666-426.666667a21.333333 21.333333 0 0 1 0-30.173333l426.666666-426.666667a21.333333 21.333333 0 0 1 23.253334-4.62z" fill="#5C5C66" p-id="4078"></path></svg></button></div><div class="arrow next"><!-- 右键按钮 --><button><!-- 使用了网上找到的右箭头图标 --><?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667323073887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4223" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50"><path d="M311.833333 86.96A21.333333 21.333333 0 0 0 298.666667 106.666667v853.333333a21.333333 21.333333 0 0 0 36.42 15.086667l426.666666-426.666667a21.333333 21.333333 0 0 0 0-30.173333l-426.666666-426.666667a21.333333 21.333333 0 0 0-23.253334-4.62z" fill="#5C5C66" p-id="4224"></path></svg></button></div><div class="dots"><!-- 底部索引栏 --><div class="dot now"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div></div></div><script>// 图片数据var data = ['https://www.imagehub.cc/image/1.rZ5F4q','https://s3.bmp.ovh/imgs/2023/09/20/0e692a3967a05023.jpg','https://s3.bmp.ovh/imgs/2023/09/20/5f59deacfcb1a1a6.jpg','https://s3.bmp.ovh/imgs/2023/09/20/5f73db7c7f85563f.jpg'];// 获取元素var dWrap = document.getElementsByClassName("wrap")[0];var dPrev = document.getElementsByClassName("prev")[0];var dNext = document.getElementsByClassName("next")[0];var dots = document.getElementsByClassName("dot");var showIndex = 0; //显示当前图片的下标var timer = null;// 设置定时器，每隔5秒切换图片timer = setInterval(function () { // 清除上个dot的状态dots[showIndex].classList.remove("now"); // 切换为下一张图片showIndex += 1; // 越界处理showIndex = showIndex === data.length ? 0 : showIndex; // 改变背景changeBg(data[showIndex]); // 修改当前dot的状态dots[showIndex].classList.add("now");}, 5000)// 点击指示点dot切换图片for (var i = 0; i < dots.length; i++) { // 给dot动态添加下标dots[i].index = i; // 点击事件dots[i].onclick = function () { // 清除上个dot的状态dots[showIndex].classList.remove("now"); // 切换为点击的图片showIndex = this.index; // 越界处理showIndex = showIndex === data.length ? 0 : showIndex; // 改变背景changeBg(data[showIndex]); // 修改当前dot的状态dots[showIndex].classList.add("now");};}// 点击左箭头切换到上一张图片dPrev.onclick = function () { // 清除上个dot的状态dots[showIndex].classList.remove("now"); // 切换为上一张图片showIndex -= 1; // 越界处理showIndex = showIndex === -1 ? data.length - 1 : showIndex; // 改变背景changeBg(data[showIndex]); // 修改当前dot的状态dots[showIndex].classList.add("now");};// 点击右箭头切换到下一张图片dNext.onclick = function () { // 清除上个dot的状态dots[showIndex].classList.remove("now"); // 切换为下一张图片showIndex += 1; // 越界处理showIndex = showIndex === data.length ? 0 : showIndex; // 改变背景changeBg(data[showIndex]); // 修改当前dot的状态dots[showIndex].classList.add("now");};// 改变wrap的背景function changeBg(pic) {dWrap.style.backgroundImage = <code>url(${pic})</code>;}changeBg(data[0]);</script></body></html></p>
原文地址: https://www.cveoy.top/t/topic/fmYR 著作权归作者所有。请勿转载和采集!