transition实现焦点图切换

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/qq_22755565/article/details/78115172

transition实现焦点图切换

仅包括焦点图自动切换，不包括点击切换（前一张，后一张，点击焦点切换）

---

HTML

src填写第一张图片地址

<div class="wrap" >
    <img src="img/1.jpg" alt="" id='bannerImg'>
</div>

CSS

#bannerImg {
    display: block;
    width: 730px;
    height: 336px;
}

JS

srcArray存放轮播图片src

window.onload = function() {
    const img = document.getElementById("bannerImg")
    const srcArray = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
    const len = srcArray.length - 1
    let index = 0
    setInterval(function() {
        img.style.transition='opacity 1s ease-in 0s'
        img.style.opacity=0.2
        setTimeout(function(){
            img.src = srcArray[index]
            img.style.transition='opacity 1s ease-out'
            img.style.opacity=1
        },1000)
        setTimeout(function(){
            img.style.transition='none'
        },2000)
        if(++index > len) {
            index = 0
        }
    },4000)
}

目录