好资源导航 » 文章资讯 » JS实现动态无缝轮播

JS实现动态无缝轮播

2023-08-03 05:45:04 344

在同学的帮助下，终于使用纯js代码实现了动态轮播，学无止境加油吧！

效果图是这样的，我们需要定义一个div，并放入三张图片，还需要左右两个按钮，以及底下三个按钮三个div。

先看布局代码

如何是css部分

.clear:after{
display:block;
content:"";
clear:both;
}
.banner{
width:100%;
position:relative;
height:390px;
}
.bannerul{
width:100%;
height:390px;
list-style-type:none;
overflow:hidden;
}
.bannerulli{
width:100%;
position:absolute;
}
.pageNav{
position:absolute;
left:50%;
bottom:20px;
transform:translateX(-50%);
}
.pageNava{
display:inline-block;
margin:05px;
width:20px;
height:20px;
background-color:#fff;
border-radius:50%;
border:2pxsolid#000;
cursor:pointer;
}
.pageNava.cur{
background-color:red;
}
.leftBtn,.rightBtn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:40px;
height:50px;
background-color:rgba(0,0,0,0.5);
cursor:pointer;
}
.leftBtn{
left:0;
}
.rightBtn{
right:0;
}
.leftBtn:hover,.rightBtn:hover{
background-color:rgba(0,0,0,0.8);
}

接下来是js部分

varbanner=document.getElementById("banner");
varul=banner.getElementsByTagName("ul")[0];
varli=ul.getElementsByTagName("li");
varpageNav=banner.getElementsByClassName("pageNav")[0],leftBtn=document.getElementsByClassName("leftBtn")[0],rightBtn=document.getElementsByClassName("rightBtn")[0],n=0,index=0,timerElem=null,state=false;
for(vari=0;i0){
showImg(-100);
}else{
showImg(100);
}
}
}
}
functionshowBtn(index){
for(varz=0;zli.length-
1){
n=0;
li[n].style.left="100%";
}
showBtn(n);
showImg(-100);
}
vartimer;
timer=setInterval(autoLunbo,3000);
functionautoLunbo(){
rightBtn.onclick();
}
banner.onmouseover=function(){
clearInterval(timer);
}
banner.onmouseout=function(){
timer=setInterval(autoLunbo,3000);
}

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JS实现动态无缝轮播

热门推荐

随机推荐