javascript 으로 라운드 맵 페 이 드 효과 구현

본 편 에서 실현 한 것 은 윤 방도 페이드아웃 효과 이 고 사고방식 은 이미지 의 등급 교 체 를 이용 하여 실 현 된 것 이 며 화면의 자체 적응 속성 을 운용 했다.
1. HTML 코드
 <div class="swiper-container">
            <div class="swiper-wrapper">
                <img src="../image/1.jpg" alt="">
                <img src="../image/2.jpg" alt="">
                <img src="../image/3.jpg" alt="">
                <img src="../image/4.jpg" alt="">
                <img src="../image/5.jpg" alt="">
            div>
        div>

2. css 코드
.swiper-container{
     
    position: relative;
}
.swiper-wrapper{
     
    position: absolute;
}
.swiper-wrapper img{
     
    display:block;
    position: absolute;
}

3. js 코드
window.onload=function(){
     
    let swiperContainer = document.getElementsByClassName('swiper-container')[0];    
    let wrap=document.getElementsByClassName("swiper-wrapper")[0];  
    let wrapImg = document.getElementsByClassName("swiper-wrapper")[0].getElementsByTagName('img')
 //       
    let windowWidth = window.screen.width;
    let wrapImgLeng = wrapImg.length;
    let timer=null;
    let index = -1;
//    
    for(let i = 0 ;i < wrapImgLeng;i++){
     
          wrapImg[i].style.width = windowWidth +'px'
      }
//      ,          
    function swiper(){
     
        clearInterval(timer);
        opacity=1;
        if(++index == wrapImgLeng){
     
            index=0;
        }
        for(let i=0;i<wrapImgLeng;i++){
     
            wrapImg[i].style.opacity=1;
            if(index!=i){
     
                wrapImg[i].style.zIndex=1;
            }
        }
        timer=setInterval(function(){
     
            if(opacity<=0){
     
                clearInterval(timer);
                setTimeout(function(){
     
                    swiper();
                },3000);
            }
            opacity -=0.01;
            console.log(index)
            wrapImg[index].style.zIndex=3;
            wrapImg[index].style.opacity=opacity;
            if(index == wrapImgLeng -1){
     
                wrapImg[0].style.zIndex=2;
            }else{
     
                wrapImg[index+1].style.zIndex=2;
            }
        },30);
    }
swiper();
}

좋은 웹페이지 즐겨찾기