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.运行结果

图片自己随便找找就可以...

扫描二维码关注公众号，回复： 15287082 查看本文章

手撸简易轮播图(超详细)

1.先言

2.正文

1. js代码

2.HTML

3.CSS

3.运行结果

猜你喜欢