网站建设的ppt模板,网站申请备案流程,小红书推广价目表,灵犀科技 网站开发这个代码创建了一个简单的轮播图#xff0c;可以通过点击左右箭头或自动播放来切换图片。
!DOCTYPE html
htmlheadmeta charsetutf-8 /titlejs轮播图练习/titlestyle.box {width: 60vw;height: 500px;m…这个代码创建了一个简单的轮播图可以通过点击左右箭头或自动播放来切换图片。
!DOCTYPE html
htmlheadmeta charsetutf-8 /titlejs轮播图练习/titlestyle.box {width: 60vw;height: 500px;margin: auto;position: relative;overflow: hidden;}.banner {display: flex;height: 100%;transition: all 3s;}.bannerimg {width: 60vw;}.but {width: 100%;height: 40px;position: absolute;top: 240px;display: flex;justify-content: space-between;}/* 箭头样式 */.but div {width: 30px;height: 40px;line-height: 40px;text-align: center;background-color: rgba(0, 0, 0, 0.4);font-size: 20px;color: white;cursor: pointer;}/* 小圆点区域 */.icon {width: 100%;height: 30px;display: flex;justify-content: center;position: absolute;bottom: 0;}.iconspan {width: 10px;height: 10px;border-radius: 100%;background-color: gray;margin-left: 5px;}/style/headbody!-- 可视区域 --div classbox onmouseovermove() onmouseoutmoves()!-- 存放图片的容器 --div classbannerimg src alt classinge //div!-- 箭头区域 --div classbutdiv classleft onclicksport()←/divdiv classright onclicksports()→ /div/div!-- 小圆点区域 --div classicon/div/div/bodyscriptlet data;// 定义一个充当下标let k 0;let dot;let inter; // 定义定时器变量// 获取大图片容器let banner document.getElementsByClassName(banner)[0];// 获取小圆点区域let round document.getElementsByClassName(icon)[0];// 获取左右箭头let left document.getElementsByClassName(left);let right document.getElementsByClassName(right);let imgwidth;// 获取JSON假数据let shop new XMLHttpRequest();// json假数据自己写一下,图片名称用的是picshop.open(get, js/index.json, true);shop.send();shop.onreadystatechange function() {if (shop.readyState 4 shop.status 200) {let text shop.responseText;data JSON.parse(text);console.log(data);ran();}};// 渲染函数function ran() {let str ;let roundstr ;for (let i 0; i data.length; i) {// 字符串拼接图片str img src${data[i].pic} classinge/;// 字符串拼接小圆点指示器roundstr span stylebackground-color:${i0?pink:gray}/span}// 添加第一张图片以实现无缝轮播str img src${data[0].pic} classinge/;// 将拼接的图片插入到轮播图长条内容区域banner.innerHTML str;// 将拼接的小圆点指示器插入到页面中round.innerHTML roundstr;// 获取图片的宽imgwidth document.getElementsByClassName(inge)[0].offsetWidth;// 获取小圆点指示器dot document.getElementsByTagName(span);// 设置定时器inter setInterval(scrolls, 2000);dot[0].style.backgroundColor pink;}// 图片自动轮播函数function scrolls() {// 增加索引 k表示当前显示的图片k;banner.style.transform translate(-${k*imgwidth}px);banner.style.transition transform 0.5s ease;// 如果 k 超过数据长度则重置为 0循环播放if (k data.length - 1) {k 0; // 重置索引dot[k].style.backgroundColor pink;dot[data.length - 1].style.backgroundColor gray;setTimeout(() {// 设置延迟后将 banner 的位移和过渡效果重置banner.style.transform translate(-${k*imgwidth}px);banner.style.transition none;}, 500);} else {dot[k].style.backgroundColor pink;dot[k - 1].style.backgroundColor gray;}}// 鼠标移出移入function move() {clearInterval(inter);}function moves() {inter setInterval(scrolls, 2000);}// 点击左右箭头let throttle false; // 声明节流function sport() {// 判断如果正在节流则返回if (throttle) return;// 开始节流throttle true;//清除定时器以避免冲突clearInterval(inter);if (k 0) {k 0; // 重置索引dot[k].style.backgroundColor gray;dot[data.length - 1].style.backgroundColor pink;// 将索引设置为数据长度以便准备显示最后一张图片k data.length;banner.style.transform translate(-${k * imgwidth}px); // 向左滑动至最后一张banner.style.transition none; // 移除过渡效果} else {dot[k].style.backgroundColor gray; // 当前小圆点设为灰色dot[k - 1].style.backgroundColor pink; // 前一小圆点设为粉色}setTimeout(() {k--;banner.style.transform translate(-${k*imgwidth}px); // 更新位移banner.style.transition transform 0.5s ease; // 设置过渡效果}, 10);// 设置定时器0.5秒后取消setTimeout(() {throttle false;}, 500);}// 点击向右移动function sports() {if (throttle) return;throttle true; // 开始节流clearInterval(inter); // 清除定时器scrolls(); // 调用滚动函数// 设置定时器0.5秒后取消节流setTimeout(() {throttle false;}, 500);}/script
/html
JavaScript轮播图此代码他
实现了切换图片的功能上一张、下一张、指定索引。创建了小圆点并更新其状态。实现了自动播放功能每2秒切换一次图片。
