大家好，今天为大家带来定时的轮播图，通过刷新之后轮播图会没距离一秒来进行转动
接下来我们来简单介绍一下HTML结构
这有个大盒子叫slider
然后下面放了装图片的盒子叫slider-wrapper
再放一个装文字和ul和li的盒子叫slider-indicator的盒子 ul li(设置小圆点)
然后下面是也有一个盒子装这两个小盒子，一个是prev，一个是设置next
<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>
接下来是CSS结构
<style> * { box-sizing: border-box; } .slider { width: 560px; height: 400px; 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>
77
接下来就是JS结构
第一步我们可以先设置一个数组sliderData的数组，里面来一一装图片 title 和颜色
完成这一步我们可以来获取元素使用document.querySelector来获取元素，可能会和老版本不同，因为我这是新版的JSAPl，不管是结构还是语法都比以前方便了很多
我们获取两个元素后然后需要设置初始值才能进行数字改变，所以这块我们不难定义cont，只能定义let ，因为cont是常量，不能修改里面的值，let恰恰相反
2.第二步我们开启定时器
setInterval意思就是打开定时器的意思，然后我们里面写了一个方法，i++意思就是每隔一段时间我们这里面要加1
if函数是判断语句，我们这块的意思是如果我们的i已经到了最后一张，那么数组长度就是八，然后会返回来1，这一步必不可少
然后我们进行更换图片的路径
然后呢我们需要把文字写到p标签里面去
使用p.innerHTML=sliderData[i].title
这个意思就是我们可以使用 document.getElementById(‘ xx ’).innerHTML 来获取指定标签内的html内容这个[i]的意思是素组的下标，因为是动态，所以我们得写i，不能写死
最后一部就是写我们的小圆点
//先删除以前的小圆点
document.querySelector('.slider-indicator .active').classList.remove('active')
删除这个小圆点是为了避免重复出现小圆点remove是删除的意思
//只让当前的li添加active
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
删除之后我们也还需要一个小圆点我们就用到了add是添加的意思，然后我们这个毕竟是轮播图，我们从第一个需要增加，所以我们这里用模板字符串$i+1,JS最新的ES6语法模板字符串
到这里我们整个架构就介绍完了，接下来展示源码
<script> // 1. 初始数据 const sliderData = [ { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' }, { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' }, { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' }, { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' }, { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' }, { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' }, { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' }, { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' }, ] //1.获取元素 const img=document.querySelector('.slider-wrapper img') const p=document.querySelector('.slider-footer p') let i=0 //2.开启定时器 setInterval(function(){ i++ //无线链接位置 一共八张，到了最后一张 数组长度就是八 if(i>=sliderData.length){ i=0 } //更换图片路径 img.src=sliderData[i].url //把子写到p里面去 p.innerHTML=sliderData[i].title //小圆点 //先删除以前的小圆点 document.querySelector('.slider-indicator .active').classList.remove('active') //只让当前的li添加active document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active') },1000) </script>
源码如下：
<!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; 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 sliderData = [ { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' }, { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' }, { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' }, { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' }, { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' }, { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' }, { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' }, { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' }, ] //1.获取元素 const img=document.querySelector('.slider-wrapper img') const p=document.querySelector('.slider-footer p') let i=0 //2.开启定时器 setInterval(function(){ i++ //无线链接位置 一共八张，到了最后一张 数组长度就是八 if(i>=sliderData.length){ i=0 } //更换图片路径 img.src=sliderData[i].url //把子写到p里面去 p.innerHTML=sliderData[i].title //小圆点 //先删除以前的小圆点 document.querySelector('.slider-indicator .active').classList.remove('active') //只让当前的li添加active document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active') },1000) </script> </body> </html>
