微客导航 » 文章资讯 » JavaScript实现轮播图效果代码实例

JavaScript实现轮播图效果代码实例

2023-08-13 05:34:04 293

这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

HTML部分：






轮播图







轮播图1
轮播图2
轮播图3
轮播图4
轮播图5


第1张
第2张
第3张
第4张
第5张

CSS部分

*{
margin:0;
padding:0;
list-style:none;
}
.container{
width:600px;
height:400px;
border:4pxdouble#FF6633;
margin:0auto;
}

/*轮播图*/
.lbimgli{
width:100%;
height:350px;
text-align:center;
line-height:350px;
display:none;
font-size:25px;
color:#FF6633;
}
.lbimg.on{
display:block;
}

.btn{
width:100%;
height:50px;
background-color:#3CBDFF;
display:flex;
}
.btnli{
flex:1;
color:#fff;
font-weight:bold;
line-height:50px;
text-align:center;
font-family:"楷体";
cursor:pointer;

}
.btn.active{
background-color:rgba(0,0,0,0.2);
transition:allease-in-out0.25s;
}

JavaScript部分

window.onload=function(){
varlbimg=document.querySelector(".lbimg");
varlbimgs=lbimg.querySelectorAll("li");
varbtn=document.querySelector(".btn");
varbtns=btn.querySelectorAll("li");

for(vari=0;i
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

JavaScript实现轮播图效果代码实例

热门推荐

随机推荐