目录
1.先言
- 这是一个超简易的轮播图,实现内容较为简单,针对于上一个SSM项目中不完整的轮播图进行改善.
- 学会了这个js的逻辑结构基本类似的轮播图都可以手撸了.
- 当然直接用swiper同样也是可以的.
2.正文
1. js代码
const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');
// 获取button(和页面中的id相对应)
const preBtn = document.querySelector('#preBtn')
const nextBtn = document.querySelector('#nextBtn')
//该轮播图是在浏览器加载的时候直接把所有的图片从后台请求到,这样就不会在翻页的时候需要重新加载
// Counter
// (点击轮播图按钮时会实现图片切换,需要通过一个定义变量来计数,通过点击箭头来控制Counter的数量=>对应第几张页面)
let counter = 1;
//size
// (通过图片的宽度来定义图片的位移宽度)
// clientWidth:不包含padding的图片宽度的值
const size = carouselImages[0].clientWidth
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
// buttonListeners(按钮监听方法)
nextBtn.addEventListener('click', () => {
if (counter >= carouselImages.length - 1) return;
carouselSlide.style.transition = 'transform 0.5s ease-in-out';
counter++;//counter=2
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
})
preBtn.addEventListener('click', () => {
if (counter <= 0) return;
carouselSlide.style.transition = 'transform 0.5s ease-in-out';
counter--;//counter=2
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
})
//控制当页面调到最后一张或第一张时的情况
carouselSlide.addEventListener('transitionend', () => {
if (carouselImages[counter].id === 'lastClone') {
carouselSlide.style.transition = 'none';
counter = carouselImages.length - 2;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
} else if (carouselImages[counter].id === 'firstClone') {
carouselSlide.style.transition = 'none';
counter = carouselImages.length - counter;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
})
2.HTML
<!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">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="carousel-container">
<!-- 图片波动指针 -->
<i class="fa-solid fa-arrow-left" id="preBtn"></i>
<i class="fa-solid fa-arrow-right" id="nextBtn"></i>
<div class="carousel-slide">
<!-- 把最后一张图片放到最开始位置,命名id为lastClone -->
<img src="/img/4.jpg" alt="" id="lastClone">
<img src="/img/1.jpg" alt="">
<img src="/img/2.jpg" alt="">
<img src="/img/3.jpg" alt="">
<img src="/img/4.jpg" alt="">
<!-- 把第一张图片放到最后位置,命名id为firstClone -->
<img src="/img/1.jpg" alt="" id="firstClone">
</div>
</div>
<script src="https://kit.fontawesome.com/4a7bd3910d.js" crossorigin="anonymous"></script>
<script src="./script.js"></script>
</body>
</html>
3.CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.carousel-container{
width: 45%;
margin: auto;
margin-top: 100px;
overflow: hidden;
position: relative;
border: 5px solid;
border-image: linear-gradient(to right,#e829cc,#b8e407,#ff0000) 1 6;
}
.carousel-slide{
display: flex;
width: 100%;
height: 500px;
}
#preBtn{
position: absolute;
top: 50%;
z-index: 10;
left: 5%;
font-size: 30px;
color: rgb(255, 255, 255);
opacity: 0.8;
cursor: pointer;
}
#nextBtn{
position: absolute;
top: 50%;
z-index: 10;
right: 5%;
font-size: 30px;
color: rgb(255, 255, 255);
opacity: 0.8;
cursor: pointer;
}
3.运行结果
图片自己随便找找就可以...