web页面banner轮播图（幻灯片）使用opacity实现的一种方式

常见网页轮播图（图片幻灯片），自动轮播，且带有前后按钮和圆点播放按钮（圆点显示图片交替状态）。
此文旨在通过opacity属性实现幻灯片功能，实现banner图轮替播放。

.slide {
    
    
    position: relative;
    width: 100%;
    height: 600px;
}

.banner {
    
    
    position: relative;
    width: 1280px;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
}

.banner-item {
    
    
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 500px;
    opacity: 0;
}

.banner-item-img {
    
    
    width: 100%;
    height: 100%;
}

.switch-btn {
    
    
    position: absolute;
    bottom: 40px;
    right: 310px;
}

.indicator {
    
    
    width: 90px;
    height: 10px;
    position: absolute;
    bottom: 114px;
    right: 330px;
}

.indicator-circle {
    
    
    display: inline-block;
    width: 10px;
    height: 10px;
    float: left;
    margin-right: 8px;
    border-radius: 50%;
    background: rgb(216, 111, 24, .5);
    cursor: pointer;
}

.active {
    
    
    background: rgb(255, 241, 233);
}

<div class="slide">
    <div class="banner">
        <div class="banner-item">1<img class="banner-item-img" src="./image/item-1.jpg" alt=""></div>
        <div class="banner-item">2<img class="banner-item-img" src="./image/item-2.jpg" alt=""></div>
        <div class="banner-item">3<img class="banner-item-img" src="./image/item-3.jpg" alt=""></div>
        <div class="banner-item">4<img class="banner-item-img" src="./image/item-4.jpg" alt=""></div>
        <div class="banner-item">5<img class="banner-item-img" src="./image/item-5.jpg" alt=""></div>
    </div>
    <div class="switch-btn">
        <button onclick="previous()">previous</button>
        <button onclick="next()">next</button>
    </div>
    <div class="indicator">
        <span class="indicator-circle"></span>
        <span class="indicator-circle"></span>
        <span class="indicator-circle"></span>
        <span class="indicator-circle"></span>
        <span class="indicator-circle"></span>
    </div>
</div>

javascript实现

let timer = null;
let variable = 0;

let bannerArray = window.document.getElementsByClassName("banner-item");
let indicatorPoint = window.document.getElementsByClassName("indicator-circle");

// 所有项隐藏
function hiddenItem(param) {
    
    
    for (let i = 0; i < param.length; i++) {
    
    
        param[i].style.opacity = 0;
    }
}

// 幻灯片切换
function switchItem() {
    
    
    variable += 1;
    if (variable >= 5)
        variable = 0;
    hiddenItem(bannerArray);
    bannerArray[variable].style.opacity = 1;
    indicatorPointLight(variable);
}
timer = window.setInterval(switchItem, 1000);

// 指定项高亮
function showItem(index, bannerArray) {
    
    
    hiddenItem(bannerArray);
    bannerArray[index].style.opacity = 1;
    indicatorPointLight(index);
    timer = window.setInterval(switchItem, 1000);
}

// 上一页
function previous() {
    
    
    window.clearInterval(timer);
    variable -= 1;
    if (variable < 0)
        variable = 4;
    showItem(variable, bannerArray);
}

// 下一步
function next() {
    
    
    window.clearInterval(timer);
    variable += 1;
    if (variable > 4)
        variable = 0;
    showItem(variable, bannerArray);
}

// 圆点按钮
for (let i = 0; i < indicatorPoint.length; i++) {
    
    
    indicatorPoint[i].onclick = function () {
    
    
        window.clearInterval(timer);
        variable = i;
        showItem(i, bannerArray);
        indicatorPointLight(i);
     }
}

// 圆点高亮
function indicatorPointLight(index) {
    
    
    for (let i = 0; i < indicatorPoint.length; i++) {
    
    
        indicatorPoint[i].className = "indicator-circle";
    }
    indicatorPoint[index].className = "indicator-circle active";
}

其中，有一处可以使用闭包写法：

// 圆点按钮
for (var i = 0; i < indicatorPoint.length; i++) {
    
    
    // var声明闭包写法
    (function (i) {
    
    
        indicatorPoint[i].onclick = function () {
    
    
            window.clearInterval(timer);
            variable = i;
            showItem(i, bannerArray);
            indicatorPointLight(i);
        }
    })(i);
}

关于定时器setInterval：

let timer = null;
let variable = 0;

function tempInterval() {
    
    
    if (variable < 10) {
    
    
        variable += 1;
        console.log("variable", variable);
    } else {
    
    
        window.clearInterval(timer);
    }
}
timer = window.setInterval(tempInterval, 1000);

可以使用window.requestAnimationFrame

let timer = null;
let variable = 0;

function switchImg() {
    
    
    timer = window.requestAnimationFrame(switchImg);
    console.log("variable", variable);
    variable += 1;
    if (variable > 10) {
    
    
        window.cancelAnimationFrame(timer);
    }
};
switchImg();

关于定时器及requestAnimationFrame的描述介绍很少，后面加以整理。