轮播图
图片：
代码
<!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> /* ! 3. 轮播图 */ .slider { max-width: 750px; min-width: 320px; margin: auto; padding: 0 10px; } .slider .imgs { /* 图片容器必须要有高度,否则下面图片不能正常显示 */ height: 150px; } .slider .imgs img { /* 图片完全充满父级空间显示 */ height: 100%; width: 100%; /* 图片带有圆角 */ border-radius: 10px; /* 默认图片全部隐藏,只有有active的图片才显示 */ display: none; } .slider .imgs img:hover { cursor: pointer; } /* 默认显示第一张 */ .slider .imgs img.active { display: block; } /* 轮播图按钮组 */ .slider .btns { /* 按钮水平一排显示,用flex,且水平居中 */ display: flex; place-content: center; } .slider .btns span { /* 按钮宽高相同,确定显示成一个正圆 */ width: 8px; height: 8px; /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */ background-color: rgba(255, 255, 255, 0.4); /* 50%可确保显示为正圆 */ border-radius: 50%; /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */ margin: -12px 3px 5px; } .slider .btns span.active { background-color: #fff; } .slider .page { display: flex; place-content: space-between; margin-top: -88px; opacity: 0.3; } .slider .page button { border: none; } </style> <link rel="stylesheet" href="//at.alicdn.com/t/font_3280335_j9wms97sque.css" /> </head> <body> <div class="slider"> <div class="imgs"> <img src="images/1.jpg" alt="" data-index="1" class="active" /> <img src="images/2.jpg" alt="" data-index="2" /> <img src="images/3.jpg" alt="" data-index="3" /> <img src="images/4.jpg" alt="" data-index="4" /> <img src="images/5.jpg" alt="" data-index="5" /> </div> <div class="btns"> <span data-index="1" class="active" onclick="setActive()"></span> <span data-index="2" onclick="setActive()"></span> <span data-index="3" onclick="setActive()"></span> <span data-index="4" onclick="setActive()"></span> <span data-index="5" onclick="setActive()"></span> </div> <div class="page"> <button class="prev" onclick="setPage(1)"> <i class="iconfont icon-shangyige"></i> </button> <button class="next" onclick="setPage(2)"> <i class="iconfont icon-xiayige"></i> </button> </div> </div> <script> const imgs = document.querySelectorAll(".slider .imgs img"); const btns = document.querySelectorAll(".slider .btns span"); let iNow = 0; //清空class function claerClass() { imgs.forEach((img) => img.classList.remove("active")); btns.forEach((btn) => btn.classList.remove("active")); } //添加样式：翻页、自动播放、点击btn按钮 function setActive(iNow) { //调用清空class自定义函数 claerClass(); //if判断iNow !== undefined ：翻页、自动播放；else：点击btn按钮 if (iNow !== undefined) { [...imgs].filter((img, index) => { if (iNow === index) { img.classList.add("active"); } }); [...btns].filter((btn, index) => { if (iNow === index) { btn.classList.add("active"); } }); } else { event.target.classList.add("active"); imgs.forEach((img) => { if (img.dataset.index === event.target.dataset.index) { img.classList.add("active"); } }); } } //自动播放函数 function setInteCanshu() { iNow++; if (iNow == btns.length) iNow = 0; setActive(iNow); } //设置翻页 function setPage(ele) { // ele :1 上一页 2 下一页 if (ele === 2) { iNow++; if (iNow == imgs.length) iNow = 0; setActive(iNow); } else { iNow--; if (iNow == -1) iNow = imgs.length - 1; setActive(iNow); } } //间隔2秒执行一次自动函数 let setInte = setInterval(setInteCanshu, 2000); //获取整个div let slider = document.querySelector(".slider"); //鼠标悬停时自动停止播放 slider.onmouseover = () => clearInterval(setInte); //离开时又自动播放 slider.onmouseout = () => (setInte = setInterval(setInteCanshu, 2000)); </script> </body></html>
实例演示ajax:xhr
代码：
<script> let url = ""; //ajax:xhr function getUser() { //创建对象 const xhr = new XMLHttpRequest(); //请求类型 xhr.response("json"); //配置参数 xhr.open("GET", url); //请求成功 xhr.onload = () => { console.log(xhr.response); }; //请求失败 xhr.onerror = () => { console.log("请求失败"); }; //发起请求 xhr.send(null); } </script>
