收藏
PHPz批改状态：合格
老师批语：
<!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><linkrel="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;//清空classfunction 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);//获取整个divlet slider = document.querySelector(".slider");//鼠标悬停时自动停止播放slider.onmouseover = () => clearInterval(setInte);//离开时又自动播放slider.onmouseout = () => (setInte = setInterval(setInteCanshu, 2000));</script></body></html>
<script>let url = "";//ajax:xhrfunction 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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
