代码:
<!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>Document</title> <style> * { padding: 0; margin: 0; } div { width: 700px; height: 320px; margin: 100px auto; position: relative; cursor: pointer; } p { position: absolute; left: 0; bottom: 0; line-height: 50px; background-color: #666; color: #fff; width: 100%; padding-left: 10px; font-size: 20px; box-sizing: border-box; } </style> </head> <body> <div class="box"> <img src="./images/b01.jpg" alt="" /> <p>第一张图片</p> </div> <script> // 需求:每隔一秒钟切换一个图片 // 分析: // ①:获取元素(图片和文字) // ②:设置定时器函数 // 设置一个变量++ // 更改图片张数 // 更改文字信息 // ③:处理图片自动复原从头播放 // 如果图片播放到最后一张就是第9张 // 则把变量重置为0 // 注意逻辑代码写到图片和文字变化的前面 // 获取操作元素 let img = document.querySelector('.box img') let p = document.querySelector('.box p') // 构建对象数组 let array_pics = [ { src: './images/b01.jpg', desc: '第一张图片' }, { src: './images/b02.jpg', desc: '第二张图片' }, { src: './images/b03.jpg', desc: '第三张图片' }, { src: './images/b04.jpg', desc: '第四张图片' } ] // 变量 作为数组下标 let num = 0 // 自动轮播函数 function autoPlay(){ // 下标自增 num++ // 如果下标超过数组长度,将下标归为0 if (num >= array_pics.length) { num = 0 } // 对象 用于解套出路径和描述信息 let obj = array_pics[num] // 修改图片 img.src = obj.src // 修改文字 p.innerHTML = obj.desc // console.log(obj); } // 设置定时函数 setInterval(autoPlay, 1000) </script> </body> </html>
效果图:
web API-网页轮播图效果
最新推荐文章于 2023-12-27 07:30:00 发布