前言
在字节跳动青训营课程中,我学习到了JavaScript
这门编程语言,于是在学习的过程中想通过原生JS去实现在页面当中的一些组件。
轮播图实现
实现效果
- 图片自动播放效果。
- 点击图片左右按钮,实现图片左右切换效果。
实现技术
- 采用HTML+CSS+JavaScript实现。
- JS部分逻辑采用ES6语法。
代码实现
HTML
<div class="carousel-out">
<div class="carousel">
<div class="slides">
<img src="./imgs/1.jpeg" id="img-1" alt="">
<img src="./imgs/2.jpeg" id="img-2" alt="">
<img src="./imgs/3.jpeg" id="img-3" alt="">
</div>
<button class="prev"><img src="./imgs/icon.png" /></button>
<button class="next"><img src="./imgs/icon.png" /></button>
</div>
</div>
- 三个
img
元素存储需要切换的轮播图。 - 俩个
button
元素分别实现左右切换照片。
CSS
.carousel-out {
width: 100%;
background-color: rgba(186, 50, 41, 0.1);
}
.carousel {
position: relative;
margin: 0 auto;
width: 800px;
height: 500px;
overflow: hidden;
}
.slides {
position: absolute;
top: 0;
left: 0;
width: 2400px;
transition: all 0.5s;
}
.slides img {
width: 800px;
height: 500px;
float: left;
object-fit: cover;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
font-size: 20px;
border: none;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
cursor: pointer;
}
.prev img {
width: 25px;
height: 25px;
transform: rotate(180deg);
}
.next img {
width: 25px;
height: 25px;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
JS
var carousel = document.querySelector('.carousel');
var slides = document.querySelector('.slides');
var prevButton = document.querySelector('.prev');
var nextButton = document.querySelector('.next');
let slidePosition = 0;
var slideWidth = 800;
var slidesNumber = 3;
function updateSlidePosition() {
slides.style.transform = `translateX(-${slidePosition}px)`;
}
function moveToNextSlide() {
if (slidePosition === slideWidth * (slidesNumber - 1)) {
slidePosition = 0;
} else {
slidePosition += slideWidth;
}
updateSlidePosition();
}
function moveToPrevSlide() {
if (slidePosition === 0) {
slidePosition = slideWidth * (slidesNumber - 1);
} else {
slidePosition -= slideWidth;
}
updateSlidePosition();
}
function startSlideShow() {
setInterval(() => {
moveToNextSlide();
}, 3000);
}
nextButton.addEventListener('click', () => {
moveToNextSlide();
});
prevButton.addEventListener('click', () => {
moveToPrevSlide();
});
startSlideShow();
这样一个简易轮播图就实现成功了。
注:JS部分采用了ES6写法,有问题随时评论哦。