原生js轮播图动效

一：原生js轮播图

html：代码复制以下代码粘贴到你要展示的页面，如index.html

<div class="banner">    

<div id="banner" class="banner wrapin">    

<ul id="b_pic">    

<li style="display: block;"><img src="images/banner1.jpg"></li>    

<li><img src="images/banner2.jpg"></li>    

<li><img src="images/banner3.jpg"></li>    

<li><img src="images/banner4.jpg"></li>    

<li><img src="images/banner5.jpg"></li>    

</ul>    

<ul id="b_an">    

<li></li>    

<li></li>    

<li></li>    

<li></li>    

<li></li>    

</ul>    

</div>    

<script src="./js/lb.js"></script>    

</div>    

复制下面css代码粘贴到css文件代码最末尾

#banner {
width: 100%;
height: 550px;
position: relative;
}
#banner ul#b_pic li {
width: 100%;
height: 550px;
overflow: hidden;
position: absolute;
top: 0;
display: none;
}
#banner ul#b_pic li img {
width: 100%;
height: 550px;
object-fit:cover;
display: block;
}
#banner ul#b_an {
position: absolute;
width: 100%;
bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
}
#banner ul#b_an li {
width: 13px;
height: 13px;
background: #86939b;
margin: 0 3px;
}

js直接下载文件：

js.zip

下载文件的同学可以忽略以下代码

也可以新建lb.js文件并且复制下面代码粘贴到lb.js文件中，lb.js应该放到js文件夹中。

    //第一个幻灯 

    var pic_lis=document.getElementById('b_pic').getElementsByTagName('li');

    var an_lis=document.getElementById('b_an').getElementsByTagName('li');

    an_lis[0].style.background='#b31114';

    var c=0;

    function h_slide(){

        c++;

        if(c==pic_lis.length){c=0;}

        for(var i=0; i<pic_lis.length; i++){

            pic_lis[i].style.display='none';

            an_lis[i].style.background='#86939b';

        }

        pic_lis[c].style.display='block';

        an_lis[c].style.background='#b31114';

    }

    var timer=setInterval(h_slide,5000);

    for(var j=0; j<pic_lis.length; j++){

        an_lis[j].index=j;

        an_lis[j].onmouseover=function(){

            index=this.index;

            clearInterval(timer);

            for(var k=0; k<an_lis.length; k++){

                pic_lis[k].style.display='none';

                an_lis[k].style.background='#86939b';

            }

            pic_lis[index].style.display='block';

            an_lis[index].style.background='#b31114';

        }

        an_lis[j].onmouseout=function(){

            timer=setInterval(h_slide,5000);

        }

    }