【免费】以上代码实现了一个简单的轮播图功资源-CSDN文库

共9个文件

jpg：8个

html：1个

轮播图

需积分: 0 130 浏览量 2023-08-20 17:49:40 上传评论收藏 4.21MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

slideshow.zip （9个子文件）

slideshow

轮播图完整版.html 6KB

images

slider04.jpg 45KB

slider08.jpg 513KB

slider05.jpg 499KB

slider01.jpg 22KB

slider03.jpg 1.96MB

slider06.jpg 253KB

slider07.jpg 392KB

slider02.jpg 571KB

<!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> * { box-sizing: border-box; } .slider { width: 560px; height: 400px; margin: auto; overflow: hidden; } .slider-wrapper { width: 100%; height: 320px; } .slider-wrapper img { width: 100%; height: 100%; display: block; } .slider-footer { height: 80px; background-color: rgb(100, 67, 68); padding: 12px 12px 0 12px; position: relative; } .slider-footer .toggle { position: absolute; right: 0; top: 12px; display: flex; } .slider-footer .toggle button { margin-right: 12px; width: 28px; height: 28px; appearance: none; border: none; background: rgba(255, 255, 255, 0.1); color: #fff; border-radius: 4px; cursor: pointer; } .slider-footer .toggle button:hover { background: rgba(255, 255, 255, 0.2); } .slider-footer p { margin: 0; color: #fff; font-size: 18px; margin-bottom: 10px; } .slider-indicator { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; } .slider-indicator li { width: 8px; height: 8px; margin: 4px; border-radius: 50%; background: #fff; opacity: 0.4; cursor: pointer; } .slider-indicator li.active { width: 12px; height: 12px; opacity: 1; } </style> </head> <body> <div class="slider"> <div class="slider-wrapper"> <img src="./images/slider01.jpg" alt="" /> </div> <div class="slider-footer"> <p>对人类来说会不会太超前了？</p> <ul class="slider-indicator"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="toggle"> <button class="prev"><</button> <button class="next">></button> </div> </div> </div> <script> // 1. 初始数据 const data = [{ url: './images/slider01.jpg', title: '奋斗', color: 'rgb(132, 91, 48)' }, { url: './images/slider02.jpg', title: '风景图1', color: 'rgb(74, 75, 24)' }, { url: './images/slider03.jpg', title: '海边！', color: 'rgb(53, 40, 38)' }, { url: './images/slider04.jpg', title: '雪景', color: 'rgb(191, 190, 196)' }, { url: './images/slider05.jpg', title: '重庆洪崖洞', color: 'rgb(109, 112, 109)' }, { url: './images/slider06.jpg', title: '重庆火锅', color: 'rgb(166, 131, 143)' }, { url: './images/slider07.jpg', title: '重庆小面', color: 'rgb(55, 33, 28)' }, { url: './images/slider08.jpg', title: '重庆火锅宣传图', color: 'rgb(228, 81, 76)' }, ] // 获取元素 const img = document.querySelector('.slider-wrapper img') const p = document.querySelector('.slider-footer p') const footer = document.querySelector('.slider-footer') // 1. 右按钮业务 // 1.1 获取右侧按钮 const next = document.querySelector('.next') let i = 0 // 信号量控制播放图片张数 // 1.2 注册点击事件 next.addEventListener('click', function() { i++ i = i >= data.length ? 0 : i // 1.3 得到对应的对象 // console.log(data[i]) // 调用函数 toggle() }) // 2. 左侧按钮业务 // 2.1 获取左侧按钮 const prev = document.querySelector('.prev') // 1.2 注册点击事件 prev.addEventListener('click', function() { i-- i = i < 0 ? data.length - 1 : i // 1.3 得到对应的对象 // console.log(data[i]) // 调用函数 toggle() }) // 声明一个渲染的函数作为复用 function toggle() { // 1.4 渲染对应的数据 img.src = data[i].url p.innerHTML = data[i].title footer.style.backgroundColor = data[i].color // 1.5 更换小圆点先移除原来的类名，当前li再添加这个类名 document.querySelector('.slider-indicator .active').classList.remove('active') document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active') } // 3. 自动播放模块 let timerId = setInterval(function() { // 利用js自动调用点击事件 click() 一定加小括号调用函数 next.click() }, 1000) // 4. 鼠标经过大盒子，停止定时器 const slider = document.querySelector('.slider') // 注册事件 slider.addEventListener('mouseenter', function() { // 停止定时器 clearInterval(timerId) }) // 5. 鼠标离开大盒子，开启定时器 // 注册事件 slider.addEventListener('mouseleave', function() { // 停止定时器 if (timerId) clearInterval(timerId) // 开启定时器 timerId = setInterval(function() { // 利用js自动调用点击事件 click() 一定加小括号调用函数 next.click() }, 1000) }) // 6. 鼠标经过小li，跳到指定的位置，并修改样式 //6.1获取对象li集合 const indicators = document.querySelectorAll('.slider-indicator li') //每个小li设置 indicators.forEach((indicator, index) => { indicator.addEventListener('mouseenter', function() { i = index toggle() }) }); </script> </body> </html>

评论收藏

内容反馈