用javascript实现轮播图效果

不爱吃糖的程序媛

发布于 2024-01-18 19:56:34

1040

发布于 2024-01-18 19:56:34

本篇实现的是一个图片自动循环轮播的效果，没有左右按键和分页码。最实用的一个点是，用了window.screen.width这个属性;能够根据屏幕去对轮播图片进行自适应。

1.HTML部分

<div class="swiper-container">
       <div class="swiper-wrapper" style="left:0">
           <img src="../image/1.jpg" alt="">
           <img src="../image/2.jpg" alt="">
           <img src="../image/1.jpg" alt="">
           <img src="../image/4.jpg" alt="">
           <img src="../image/5.jpg" alt="">
       </div>
   </div>

2.css部分

//css部分都没有对宽度进行设置

.swiper-container{
    position: relative;
    height:100vh;
}
.swiper-wrapper{
    position: absolute;
    height:100vh;
    z-index: 1;
    background:rgb(0, 0, 228,0.85);
}
.swiper-wrapper img{
    display:block;
    float: left;
    height:100vh;
    opacity: 0.8;
}

3.JavaScript部分

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 newLeft;
//两个盒子的样式变化，外面盒子的宽度是屏幕宽度，里面袋子的宽度是屏幕宽度*图片数
    swiperContainer.style.width = windowWidth +'px';
    wrap.style.width = windowWidth * wrapImgLeng + 'px'

    for(let i = 0 ;i < wrapImgLeng;i++){
        wrapImg[i].style.width = windowWidth +'px'
    }
    function next_pic(){
        if(wrap.style.left == - windowWidth * (wrapImgLeng-1) + 'px'){
            newLeft = -windowWidth * 2;
        }else{
            newLeft=parseInt(wrap.style.left) - windowWidth;
        }
        wrap.style.left=newLeft+"px";
    }
    //自动循环播放
    function autoPlay(){
        timer=setInterval(function(){
            next_pic();
        },3000);
    }
    autoPlay();
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-01-18，如有侵权请联系 cloudcommunity@tencent.com 删除

wrapper