结构:
img-list : 图片列表
radio-list : 圆点 列表
<div class="root">
<ul class="img-list">
<li class="img-item active">1</li>
<li class="img-item">2</li>
<li class="img-item">3</li>
</ul>
<ul class="radioList">
<li class="radio-item active" data-index=1></li>
<li class="radio-item" data-index=2></li>
<li class="radio-item" data-index=3></li>
</ul>
<button>《= </button>
<button> =》</button>
</div>
样式:
<style>
* {
padding: 0;
margin: 0;
}
.root {
width: 800px;
height: 400px;
border: 1px solid black;
margin: 0% auto;
position: relative;
}
.img-list {
width: 800px;
height: 400px;
position: absolute;
}
.img-item {
width: 100%;
height: 100%;
list-style-type: none;
position: absolute;
transition: all 1s
}
.img-item.active {
z-index: 50;
}
.img-list .img-item:nth-child(1) {
background-color: pink;
}
.img-list .img-item:nth-child(2) {
background-color: beige;
}
.img-list .img-item:nth-child(3) {
background-color: navajowhite;
}
.radioList {
position: absolute;
bottom: 0;
left: calc(50% - 100px);
display: flex;
justify-content: center;
align-items: center;
width: 200PX;
height: 40px;
background-color: aliceblue;
z-index: 200;
}
.radio-item {
width: 30PX;
height: 30px;
margin: 0px 5px;
cursor: pointer;
border-radius: 50%;
background-color: pink;
list-style-type: none;
transition: all .8s
}
.radio-item.active {
background-color: rgb(208, 84, 104);
}
button {
position: absolute;
z-index: 100;
cursor: pointer;
}
.root button:first-of-type {
left: 0%;
top: 50%;
}
.root button:last-child {
top: 50%;
right: 0%;
}
</style>
<script>
// 索引
let index = 0
let id = ''
let imgList = document.getElementsByClassName('img-item')
let radioList = document.getElementsByClassName('radio-item')
let buttonList = document.getElementsByTagName('button')
let root = document.getElementsByClassName('root')
// 后退
buttonList[0].addEventListener('click', function () {
jianjian()
})
// 前进
buttonList[1].addEventListener('click', function () {
add()
})
// 移入停止滚动
root[0].onmousemove = function () {
clearInterval(id)
}
// 移除开始滚动
root[0].onmouseleave = function () {
play()
}
// 小圆点点击切换图片
for (let i in radioList) {
radioList[i].onclick = function () {
index = i
active()
}
}
// 移除激活
function deAcive () {
for (let i of radioList) {
i.className = 'radio-item'
}
for (let i of imgList) {
i.className = 'img-item'
}
}
// 添加激活
function active () {
deAcive()
radioList[index].className = 'radio-item active'
imgList[index].className = 'img-item active'
}
// 前进
function add () {
if (index >= radioList.length - 1) {
index = 0
}
else { index++ }
active()
}
// 后退
function jianjian () {
if (index <= 0) {
index = radioList.length - 1
console.log(index)
}
else { index-- }
active()
}
function play () {
id = setInterval(() => {
add()
}, 1500)
}
play()
</script>
思路: 图片列表相对定位,图片成员通过设置绝对定位堆叠在一起;通过Z-index控制最上方的图片;创建图片和小圆点的Active样式 => 当带有Acitve的图片的z-index值会比其他图片层级高,这样即可实现图片切换,小圆点的激活样式:颜色变重。
Script:
1. 创建变量:Index接受索引,创建id接受定时器。
创建激活/失活函数用来添加 / 清空 .active Class。
失活:遍历小圆点、图片列表,使其ClassName去除‘Active'
激活:对指定索引的小圆点&&图片添加‘Active'
分析轮播图功能模块
1. 前进后退
前进 :index++后 ,调用激活函数切换图片
后退:同上。
2.图片自动滚动 、鼠标移入停止,移出重启
自动滚动:通过定时器设定前进频率:
移入:删除定时器
移除:重启定时器
3.点击小圆点切换对应图片
由于有几张图片就有几个小圆点,故点击小圆点时 index 赋值 小圆点的索引 => 对应图片则会切换。