轮播图的原生实现原理

1. 首先布局好简单的HTML代码，将几张图片和左右切换按钮包在一个div中；

2. 给他们加上CSS样式，给img设置属性 display: none ，并给第一张图片（img:first-child）设置 display: block ；

3. 在JS中先获取div容器、图片和左右按钮，获取之后设置一个当前图片的索引（count）；

4. 写一个过程函数，在这个函数中，做两件事：

   1. 先判断传入的参数索引（index）是否越界，如果小于0，将参数索引设置为最后一张图片的索引 images.length - 1 ；如果大于最后一张图片的索引，将参数索引设置为0；
   2. 然后在JS中将隐藏当前索引的图片（count），显示判断后的参数索引的图片（index），最后把当前索引（count）更新为参数索引（index）

5. 在切换按钮调用过程函数，向前切换传入当前索引减1（count-1）为实参，向后切换传入当前索引加1（count+1）为实参

6. 如果加自动切换的话，直接设置一个 setInterval 定时器，在定时器里面调用过程函数

<!-- 轮播图 -->
<div class="swiper">
    <img src="./a1.jpg">
    <img src="./a2.jpg">
    <img src="./a3.jpg">   <!-- 有三张图片 -->
    
    <div class="prev-btn"> ＜ </div>
    <div class="next-btn"> ＞ </div>   <!-- 左右切换 -->
</div>

<script>
    const swiper = document.querySelector('.swiper')
    const images = swiper.querySelectorAll('img')
    const pbtn = swiper.querySelector('.prev-btn')
    const nbtn = swiper.querySelector('.next-btn')
    
    let count = 0  //当前显示图片的索引
    
    function getImage(index) {
        //index可以当做一个伪索引，主要是定位到下一张或上一张，然后给当前索引（count）赋值
        //做一个判断，首位索引分别是 0 和 images.length-1 :
        //    1.如果向前切换，传来的参数 index = -1 < 0 ，赋到尾索引;
        //    2.如果向后切换，传来的参数 index = 1 ，继续直到 index > images.length - 1，
        //      赋到首索引;
        if (index < 0) {
            index = images.length - 1
        } else if (index > images.length - 1) {
            index = 0
        }
        console.log('当前显示的图片：', images[count], count)
        
        images[count].style.display = 'none'  //隐藏当前的图片
        images[index].style.display = 'block'  //显示向前或向后切换的图片
        count = index  //改变当前显示图片的索引count，全局中的索引更变以后，继续新一轮的传参
    }
    
    pbtn.onclick = () => {
        getImage(count - 1)  //向左切换，索引-1，传给形参index
    }
    
    nbtn.onclick = () => {
        getImage(count + 1)  //向右切换，索引+1，传给形参index
    }
    
    let timeimg = setInterval(() => {
        getImage(count + 1)  //定时自动切换
    }, 3000);
</script>

<style>
    .swiper {
        position: relative;
        width: 520px;
        height: 280px;
    }
    
    .swiper img {
        position: absolute;
        display: none;  /* 这里隐藏所有图片是重点 */
        width: 100%;
        height: 100%;
    }
    
    .swiper img:first-child {
        display: block;  /* 只留第一张图片显示 */
    }
    
    .prev-btn,
    .next-btn {
        position: absolute;
        z-index: 999;
        width: 30px;
        height: 30px;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(128, 128, 128, 0.466);
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }
    
    .prev-btn {
        left: 0;
    }
    
    .next-btn {
        right: 0;
    }
</style>

实现一个轮播渐变效果

<!-- 轮播图 -->
<div class="swiper">
    <img src="./a1.jpg">
    <img src="./a2.jpg">
    <img src="./a3.jpg">
    
    <div class="prev-btn"> ＜ </div>
    <div class="next-btn"> ＞ </div>
</div>

<script>
    let swiper = document.querySelector('.swiper')
    let images = swiper.querySelectorAll('img')
    let pbtn = swiper.querySelector('.prev-btn')
    let nbtn = swiper.querySelector('.next-btn')
    
    let count = 0 // 当前显示图片索引
    
    // 执行函数对每张图片的class添加与删除active
    function getPrevImage() {
        images[count].classList.remove('active')
        count--
        if (count < 0) {
            count = images.length - 1
        }
        images[count].classList.add('active')
    }
    
    function getNextImage() {
        images[count].classList.remove('active')
        count = (count + 1) % images.length
        images[count].classList.add('active')
    }
    
    pbtn.onclick = () => {
        getPrevImage()
    }
    
    nbtn.onclick = () => {
        getNextImage()
    }
    
    setInterval(getNextImage, 3000)
</script>

<style>
    .swiper {
        position: relative;
        width: 520px;
        height: 280px;
    }
    
    .swiper img {  /* 这里切记不能display none了所有图片 */
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s ease;
    }
    
    .swiper img.active {
        opacity: 1;
    }
    
    .swiper img:first-child {
        opacity: 1;  /* 第一张保持不隐身 */
    }
    
    .prev-btn,
    .next-btn {
        position: absolute;
        z-index: 999;
        width: 30px;
        height: 30px;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(128, 128, 128, 0.466);
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }
    
    .prev-btn {
        left: 0;
    }
    
    .next-btn {
        right: 0;
    }
</style>