JavaScript实现轮播图效果代码实例
这篇文章主要介绍了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以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。