演示
思路
- 准备轮播数据
- 获取需要改变的元素对象
- 图片
- 文本
- 版面颜色
- 圆点
- 按钮
- 构造函数
- index表示当前下标，左移index–，右移index++，注意边界处理。
- 完成index更改处理后通过轮播数据更改元素
一、HTML搭建
创建基本的HTML结构，包含轮播图容器、图片展示区，控制按钮，显示圆点：
<div class="slider"><img src="image/1.jpg" alt=""><div class="board"><p>Image 1</p><!--控制按钮--><div class="btn"><button class="left"><</button><button class="right">></button></div><!--圆点--><div class="dots"><span class="dot active"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></div></div></div>
二、CSS样式设计
添加基本样式，可以自定义修改
* {margin: 0;padding: 0;}.slider {position: relative;;height: 300px;width: 500px;background-color: aqua;}img {height: 100%;width: 100%;}.board {position: absolute;height: 50px;width: 100%;background-color: gray;bottom: 0px;}.btn {position: absolute;right: 20px;top: 0;}.left,.right{cursor:pointer}.dot{height: 5px;width: 5px;background-color: transparent;border-radius: 50%;border: 2px solid white;display: inline-block;margin: 5px;}.active{background-color: white;}
三、JavaScript编辑
1. 准备轮播数据（数组呈现）
const sliderinfor=[{img:'image/1.jpg',text:'Image 1',color:'aqua'},{img:'image/2.jpg',text:'Image 2',color:'red'},{img:'image/3.jpg',text:'Image 3',color:'green'},{img:'image/4.jpg',text:'Image 4',color:'blue'},{img:'image/5.jpg',text:'Image 5',color:'yellow'},]
2. 获取DOM元素
const img=document.querySelector('img');const text=document.querySelector('.board p');const color=document.querySelector('.board');const dots = document.querySelectorAll('.dot');3. 实现左右切换函数
let index = 0;function fl(){dots[index].classList.remove('active');if(index==0){index=sliderinfor.length-1;}else{index--;}img.src=sliderinfor[index].img;text.innerHTML=sliderinfor[index].text;color.style.backgroundColor=sliderinfor[index].color;dots[index].classList.add('active');}function fr(){dots[index].classList.remove('active');if(index==sliderinfor.length-1){index=0;}else{index++;}img.src=sliderinfor[index].img;text.innerHTML=sliderinfor[index].text;color.style.backgroundColor=sliderinfor[index].color;dots[index].classList.add('active');}
4. 添加事件监听
//获取事件源const leftBtn = document.querySelector('.left');const rightBtn = document.querySelector('.right');//添加事件监听leftBtn.addEventListener('click',fl)rightBtn.addEventListener('click',fr)四、完整代码
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.slider {position: relative;;height: 300px;width: 500px;background-color: aqua;}img {height: 100%;width: 100%;}.board {position: absolute;height: 50px;width: 100%;background-color: gray;bottom: 0px;}.btn {position: absolute;right: 20px;top: 0;}.left,.right{cursor:pointer}.dot{height: 5px;width: 5px;background-color: transparent;border-radius: 50%;border: 2px solid white;display: inline-block;margin: 5px;}.active{background-color: white;}</style>
</head><body><div class="slider"><img src="image/1.jpg" alt=""><div class="board"><p>Image 1</p><div class="btn"><button class="left"><</button><button class="right">></button></div><div class="indicators"><span class="dot active"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></div></div></div><script>const sliderinfor=[{img:'image/1.jpg',text:'Image 1',color:'aqua'},{img:'image/2.jpg',text:'Image 2',color:'red'},{img:'image/3.jpg',text:'Image 3',color:'green'},{img:'image/4.jpg',text:'Image 4',color:'blue'},{img:'image/5.jpg',text:'Image 5',color:'yellow'},]const img=document.querySelector('img');const text=document.querySelector('.board p');const color=document.querySelector('.board');const dots = document.querySelectorAll('.dot');let index = 0;function fl(){dots[index].classList.remove('active');if(index==0){index=sliderinfor.length-1;}else{index--;}img.src=sliderinfor[index].img;text.innerHTML=sliderinfor[index].text;color.style.backgroundColor=sliderinfor[index].color;dots[index].classList.add('active');}function fr(){dots[index].classList.remove('active');if(index==sliderinfor.length-1){index=0;}else{index++;}img.src=sliderinfor[index].img;text.innerHTML=sliderinfor[index].text;color.style.backgroundColor=sliderinfor[index].color;dots[index].classList.add('active');}const leftBtn = document.querySelector('.left');const rightBtn = document.querySelector('.right');leftBtn.addEventListener('click',fl)rightBtn.addEventListener('click',fr)</script>
</body></html>
！尤其要注意边界处理