【轮播图】原生js实现的轮播图，功能点比较齐全的

html代码

     <div class="swiper-container">
            <button id="prevBtn" class="swiper-btn"> &#x2190;</button>  
            <div class="swiper" id="swiper">
                <div class="swiper-slide"><img src="images/banner1.png" alt=""></div>
                <div class="swiper-slide"><img src="images/banner2.png" alt=""></div>
                <div class="swiper-slide"><img src="images/banner3.png" alt=""></div>
            </div>
            <button id="nextBtn"class="swiper-btn"> &#x2192;</button> 
             <div class="swiper-pagination"></div> 
        </div>

cssl代码

.swiper-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.swiper {
    display: flex;
    transition: transform 0.5s ease;
  
}

.swiper-slide {
    width: 1200px;
    height: 550px;
    flex-shrink: 0;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
}

.swiper-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background-color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    color: #02cbe6;
    width: auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all .3s;
}
#prevBtn {
    left: 30px;
}

#nextBtn {
    right:30px;
}
.swiper-container:hover .swiper-btn{
    opacity: 1;
}

.swiper-container:hover #prevBtn {
    left: 10px;
}
.swiper-container:hover #nextBtn {
    right: 10px;
}
.swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 9;
}
.swiper-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #999;
    margin: 0 5px;
}

.swiper-pagination .swiper-pagination-bullet-active{
    background-color: #4377e9;
}

js代码

function swiper() {
    document.addEventListener('DOMContentLoaded', function () {
        var swiper = document.getElementById('swiper');
        var swiperSlides = document.querySelectorAll('.swiper-slide');
        var currentIndex = 0;
        var slideWidth = 1200; // 假设每张图片的宽度是1200px  
        var totalSlides = swiperSlides.length;
        var autoPlayInterval;
 
        function updateSwiperPosition() {
            var translateX = -currentIndex * slideWidth;
            swiper.style.transform = 'translateX(' + translateX + 'px)';
        }
 
        function startAutoPlay() {
            autoPlayInterval = setInterval(function () {
                currentIndex = (currentIndex + 1) % totalSlides;
                updateSwiperPosition();
                updatePaginationBullets();
            }, 3000); // 每3秒自动轮播一次  
        }
 
        function stopAutoPlay() {
            clearInterval(autoPlayInterval);
        }
 
        document.getElementById('prevBtn').addEventListener('click', function () {
            stopAutoPlay(); // 停止自动轮播，以便用户可以手动控制  
            currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalSlides - 1;
            updateSwiperPosition();
            updatePaginationBullets();
        });
 
        document.getElementById('nextBtn').addEventListener('click', function () {
            stopAutoPlay(); // 停止自动轮播，以便用户可以手动控制  
            currentIndex = (currentIndex < totalSlides - 1) ? currentIndex + 1 : 0;
            updateSwiperPosition();
            updatePaginationBullets();
        });
 
        // 初始化轮播图位置，并开始自动轮播  
        updateSwiperPosition();
        startAutoPlay();
 
        // 当鼠标悬停在轮播图上时，停止自动轮播；移开时恢复自动轮播  
        var swiperContainer = document.querySelector('.swiper-container');
        swiperContainer.addEventListener('mouseenter', stopAutoPlay);
        swiperContainer.addEventListener('mouseleave', startAutoPlay);
 
 
        // 初始化小圆点  
        var pagination = document.querySelector('.swiper-pagination');
        var bullets = [];
 
        // 创建小圆点并添加到DOM中  
        swiperSlides.forEach(function (slide, index) {
            var bullet = document.createElement('span');
            bullet.classList.add('swiper-pagination-bullet');
            bullet.addEventListener('click', function () {
                currentIndex = index;
                updateSwiperPosition();
                updatePaginationBullets();
                stopAutoPlay(); // 停止自动轮播  
            });
            pagination.appendChild(bullet);
            bullets.push(bullet);
        });
 
        // 更新小圆点样式  
        function updatePaginationBullets() {
            bullets.forEach(function (bullet) {
                bullet.classList.remove('swiper-pagination-bullet-active');
            });
            bullets[currentIndex].classList.add('swiper-pagination-bullet-active');
        }
 
        // ... 其他的代码 ...  
 
        // 在初始化时更新小圆点样式  
        updatePaginationBullets();
 
    });
 
 
}
 

按钮图标