图片切换
前言:图片切换是前端页面十分常见的技术,主要是应用在首页的数据展示,并且会具有很多不同的切换的切换效果十分的炫酷。市面上也有很多框架封装了很多的图片切换的方法。本篇文章只能实现的图片切换效果,炫酷效果还未实现。虽然有很多的已经封装好的效果提供使用,但是理解最基础的原理的还是一些必要。
1、实现原理
图片切换最核心的原理,就是图片的将图片放在数组里面,操作图片数组的下标。来实现效果
准备:
css样式
* {
margin: 0;
padding: 0;
}
.ShowImg {
width: 800px;
height: 500px;
margin: auto;
/* border: 1px solid darkblue; */
margin-top: 20px;
position: relative;
}
.ShowImg img {
width: 100%;
height: 100%;
transition: all 1s ease-in;
}
ul {
display: flex;
justify-content: space-around;
align-items: center;
}
ul,
li {
list-style: none;
}
.ShowImg ul {
width: 200px;
/* border:1px solid darkblue; */
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -50px;
}
.ShowImg ul li {
width: 15px;
height: 15px;
background-color: white;
border-radius: 50%;
transition: all .5s;
}
.left {
width: 50px;
height: 50px;
font-size: 30px;
position: absolute;
top: 50%;
margin-top: -25px;
left: 0;
color: white;
background-color: rgba(6, 233, 249, 0.4);
text-align: center;
line-height: 50px;
border-radius: 50%;
z-index: 99;
}
.right {
width: 50px;
height: 50px;
font-size: 30px;
position: absolute;
top: 50%;
margin-top: -25px;
right: 0px;
color: white;
background-color: rgba(6, 233, 249, 0.4);
text-align: center;
line-height: 50px;
border-radius: 50%;
z-index: 99;
}
.bom {
width: 800px;
height: 80px;
border: 1px solid red;
margin: 10px auto;
}
span::selection {
background-color: transparent;
}
.active {
width: 20px !important;
height: 20px !important;
background-color: aqua !important;
}
span:hover{
cursor: pointer;
}
HTML结构
<div class="ShowImg">
<img src="./img/2.webp">
<ul>
</ul>
<!-- 左右按钮 -->
<span class="left"><</span>
<span class="right">></span>
</div>
搭建简单的页面
JS代码
提示:一般情况下的在图片上会有小圆点,提供点击来实现图片之间的切换。这里采用根据图片数组长度自动生成的方法来渲染点击的小圆点。
第一步:根据图片数组长度来创建并渲染小圆点
// 获取到需要渲染小圆点的节点
let ul = $('ul',0);
// 根据图片数组长度来创建圆点
imgArr.forEach((item)=>{
// 创建节点
let li = document.createElement('li');
// 插入到节点
ul.appendChild(li)
})
页面效果
第二步:
点击切换按钮,可以切换图片。这里实现的原理,设置一个index作为图片的下标,点击下一张的时候将index++,就可以实现图片的切换。当切换到最后一张的时候,就需要对index进行判断,将index重新赋值为0
上代码
// 设置index作为下标
let index = 0;
// 下一张
let nextImg = $('.right', 0);
// 上一张
let prevImg = $('.left',0)
// 获取显示图片节点
let ShowImg = $('.ShowImg img')
//绑定监听事件
nextImg.addEventListener('click', next);
prevImg.addEventListener('click', prev)
// 下一张
function next() {
// 下标++改变图片
index++;
// 判断是否切换到最后一张
if (index >= imgArr.length) {
// 重新赋值到第一张
index = 0;
}
// 切换图片
ShowImg.src = imgArr[index];
// 注意:这里给小圆点绑定样式的时候,需要将其他未选中的小圆点样式祛除(排他思想)
// 在添加样式之前,清除其他圆点的样式
pai()
// 给圆点添加样式
liAll[index].className = 'active'
}
// 上一张
function prev() {
// 注意:这里需要先进行判断再赋值。因为页面打开index--,就会找不到图片下标
if (index <= 0) {
index = imgArr.length;
}
// 同向后且逻辑一样
index--;
// 切换图片
// 同理
pai();
// 给圆点添加样式
liAll[index].className = 'active'
ShowImg.src = imgArr[index];
}
效果展示:
左右切换效果
第三步:实现小圆点的切换
逻辑:当点击按钮的时候,下面的小图片也需要切换。可以绑定样式,确定当前的图片
看代码:
先封装一个排他函数,将不是当前选中图片对应的小圆点样式去除(上图代码已修改)
// 封装一个排他函数
function pai() {
liAll.forEach(item => {
item.className = ''
})
}
这样最基础的图片切换效果就完成了
基本效果
第四步:设置定时器让图片自己动起来(同时设置移入移出,停止或开启定时器),鼠标划入左右切换按钮的时候,也需要停止计时器
let timer = null;
timer = setInterval(() => {
next()
}, 1000);
// 鼠标移入图片,小圆点的时候停止轮播
liAll.forEach((item) => {
item.addEventListener('mouseover', () => {
// 清除定时器
clearInterval(timer)
})
});
img.addEventListener('mouseover', () => {
// 清除定时器
clearInterval(timer)
});
// 移开的时候重新开启定时器
liAll.forEach((item) => {
item.addEventListener('mouseout', () => {
// 清除定时器(注意在开启定时器之前,需要重新清除定时器)
clearInterval(timer);
timer = setInterval(() => {
next()
}, 1000);
})
});
// 图片移开重新开启定时器
img.addEventListener('mouseout', () => {
clearInterval(timer);
timer = setInterval(() => {
next()
}, 1000);
});
// 鼠标划入左右切换按钮,也需要停止定时器
spanAll.forEach((item)=>{
item.addEventListener('mouseover',()=>{
clearInterval(timer)
})
});
// 滑出开启
spanAll.forEach((item)=>{
item.addEventListener('mouseout',()=>{
clearInterval(timer);
timer = setInterval(() => {
next()
}, 1000);
})
});
效果展示:
停止图片轮播
最后一步:
实现导航按钮的切换图片
// 绑定事件
liAll.forEach((item,i) =>{
item.addEventListener('click',()=>{
// 将图片改变成li对应的图片
index = i;
ShowImg.src = imgArr[index];
pai();
item.className = 'active';
})
})
效果显示:
最终效果
此文章实现的简单的图片切换效果。仅供参考,有更好的意见建议欢迎提出。其次有代码或逻辑不正确的,不好理解的也可以提出。