H5前端轮播图简单实现

H5前端轮播图简单实现

h5和js代码

<div class="chart">
        <img class="lb"  src="img/lunbo1.jpg" alt="">
        <img class="lb"  src="img/lunbo2.jpg" alt="">
        <img class="lb"  src="img/lunbo3.jpg" alt="">
        <img class="prev"  src="img/preImg.png" alt="">
        <img class="next" src="img/nexImg.png" alt="">
    </div>
    <script>
        var lblist=document.querySelectorAll(".lb");
        var prev=document.querySelector(".prev");
        var next=document.querySelector(".next");
        var j=0;
        for(var i=1;i<lblist.length;i++){
            lblist[i].style.display="none";
            lblist[i].style.opacity="0";
        }
        next.οnclick=function(){
            lblist[j].style.display="none";
            lblist[j].style.opacity="0";
            j++;
            if(j>2)j=0;
            lblist[j].style.display="block";
            lblist[j].style.opacity="1";
        }
        prev.οnclick=function(){
            lblist[j].style.display="none";
            lblist[j].style.opacity="0";
            j--;
            if(j<0)j=2;
            lblist[j].style.display="block";
            lblist[j].style.opacity="1";
        }
    </script>

css样式

.chart{
    width: 100%;
    position: relative;
}
.lb{
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    /*所有css变换一秒内执行完*/
    transition:all 1s;
}
.prev{
    position: absolute;
    left: 0;
    top: 400px;
    z-index: 2;
}
.next{
    position: absolute;
    right:0;
    top: 400px;
    z-index: 2;
}

右箭头图片
左箭头图片