这是一个基本的图片轮播器的HTML代码。
代码以HTML的文档类型声明和
<html>
标签开头。
<head>
部分包含了必要的字符编码和视口设置的元标签,以及<title>
标签。在
<style>
标签中,定义了各个元素的CSS样式。
.box
类表示图片轮播器的容器。它具有固定的宽度和高度,并使用overflow: hidden
隐藏超出容器尺寸的内容。
.content
类表示轮播图片的容器。它在.box
容器内绝对定位,并具有较大的宽度以容纳多张图片并排显示。使用display: flex
属性将图片水平对齐。
.content img
选择器适用于轮播图片。它们被设置为100%的宽度和690像素的高度,以适应容器的尺寸。
.circle
类表示轮播器的导航点。它被固定定位,并在页面水平居中对齐。每个导航点由一个带有背景颜色和圆形形状的<span>
元素代表。
.line
类表示轮播器下方的水平线。它使用带有.left
和.right
类的<a>
标签创建左右箭头。最后,代码以结束
</body>
和</html>
标签结尾。还使用<script>
标签包含了一个JavaScript文件,但在代码中没有提供该文件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> * { margin: 0; padding: 0; } .box { position: relative; width: 1421px; height: 690px; display: flex; overflow: hidden; box-shadow: 0 0 2px green; } .content { width: 9927px; position: absolute; z-index: 1; display: flex; height: 690px; transition :all 1s; } .content img { width: 100%; height: 690px; } .circle { z-index: 99; position: fixed; margin-top: -25px; display: flex; margin-left: 45%; } .circle span { width: 20px; height: 20px; display: inline-block; border-radius: 50%; font-size: 30px; margin-left: 4px; background-color: #000; } .line{ width: 100%; height: 20px; display: flex; } .left{ width: 4%; z-index: 99; height: 30px; line-height: 30px; text-align: center; margin-top: -400px; background-color: aliceblue; margin-left: 0%; } .right{ width: 4%; z-index: 99; height: 30px; line-height: 30px; text-align: center; background-color: aliceblue; margin-top: -400px; margin-left: 96%; } </style> </head> <body> <div class="box"> <div class="content"> <!-- <img src="./img/10010.webp" alt="" /> <img src="./img/10002.webp" alt="" /> <img src="./img/10007.webp" alt="" /> <img src="./img/10004.webp" alt="" /> <img src="./img/10005.webp" alt="" /> <img src="./img/10010.webp" alt="" /> --> </div> </div> <div class="circle"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="line"> <a class="left"> < </a> <a class="right"> > </a> </div> </body> <script src="js/index.js"></script> </html>
这段代码是一个用于实现图片轮播效果的JavaScript代码。
首先使用
XMLHttpRequest
对象创建了一个新的XMLHttpRequest实例,并发送一个GET请求到js/index.json
接口。该请求是异步的,意味着会在后台发送并处理响应。然后,通过
xhr.onreadystatechange
设置了一个事件监听器,当请求的状态发生变化时,会调用这个函数。在函数中,通过readyState
和status
属性检查请求是否已经完成(readyState == 4
)并且是否成功(status == 200
)。如果请求成功,会获取响应的文本内容,并使用
JSON.parse()
将其解析为JSON对象。接着调用sitem()
函数,将解析后的数据传递给它进行渲染。在
sitem()
函数中,使用循环遍历数据,生成一个包含所有图片的HTML字符串,并将其插入到具有class
为content
的元素中。然后,定义了一个自动轮播的函数
items()
。在这个函数中,通过修改元素的style
属性实现图片的滚动效果。每隔1.5秒,index
变量自增,将marginLeft
属性设置为-index * imgWidth
,即向左移动一个图片的宽度。当index
达到最后一张图片时,通过setTimeout
将其重置为0,并清除过渡效果。最后,通过调用
setInterval
函数,将items()
函数设置为每隔1.5秒自动执行一次,实现图片的自动轮播。整体思路是通过XMLHttpRequest获取到图片数据,然后使用JavaScript动态渲染页面,并通过定时器实现自动轮播的效果。
let xhr = new XMLHttpRequest(); // 创建一个新的XMLHttpRequest对象,命名为xhr。用来请求接口,处理异步操作; // 这个对象用于在浏览器和服务器之间发送 HTTP 请求和接收响应。 xhr.open('get', 'js/index.json', true); // 打开一个新的HTTP GET请求。// 请求的URL是'js/index.json'。// 第三个参数true表示请求是异步的。 xhr.send(); //发送要请求的要求 xhr.onreadystatechange = function() { // 设置一个事件监听器,当请求的状态发生变化时,这个函数就会被调用。 if (xhr.readyState == 4 && xhr.status == 200) { // 检查请求是否已经完成(readyState == 4)并且是否成功(status == 200)。 let text = xhr.responseText; // 获取响应的文本内容 let data = JSON.parse(text); // 将响应的文本内容解析为JSON对象,并将其赋值给变量data。 sitem(data); //一进页面就渲染省级的数据,以方便点击省级时展现省级的数据 let content = document.getElementsByClassName('content')[0]; console.log(content) let imgList = content.children; console.log(imgList); let imgWidth = imgList[0].offsetWidth; console.log(imgWidth); let index = 0; // 在循环外部声明 index 变量 setInterval(items,1500) function items() { index++; content.style.transition = "all 1s"; content.style.marginLeft = -index * imgWidth + "px" if (index == 7) { setTimeout(function() { index = 0; content.style.transition = ""; content.style.marginLeft = "0px"; }, 100); }else{ console.log(`我选中了第${index}个`) } }; } }; //用以存储数据 let box = document.getElementsByClassName('box')[0]; //渲染图片 function sitem(data) { let str = ""; for (let i = 0; i < data.length; i++) { str += ` <img src="${data[i].img}" alt="" /> ` } str += ` <img src="./img/10004.webp" alt="" />` document.getElementsByClassName('content')[0].innerHTML = str; } // setInterval 是一个 JavaScript 函数,用于在指定的时间间隔内重复执行某个函数或代码片段。这个时间间隔是以毫秒为单位的。当 setInterval 被调用时,它会返回一个 ID,这个 ID 可以被用来引用或稍后清除这个定时器。 // 首先获取所有的数据以方便用到的数据的 //永久定时器使其永久定时 //自动轮播 // 1.获取所有的数据 // 永久定时让其每隔1秒轮播 //获取每个图片 //让其向右转每个图片的宽度,(还要获取每个图片的宽度) //最后一张图片为第一张 //让它每隔1秒自