微客导航 » 文章资讯 » 原生JS无缝滑动轮播图

原生JS无缝滑动轮播图

2023-08-10 14:22:04 192

本文实例为大家分享了原生JS无缝滑动轮播图的具体实现代码，供大家参考，具体内容如下





Document

ul,div,img{
margin:0;
padding:0;
list-style:none;
vertical-align:top;
}
#banner{
width:400px;
height:300px;
margin:50pxauto;
position:relative;
overflow:hidden;
}
#bannerul{
width:400px;
position:absolute;
}
#bannerliimg{
width:400px;
height:300px;
text-align:center;
line-height:300px;
font-size:40px;
}
#dot{
height:20px;
position:absolute;
left:calc(50%-80px);
bottom:20px;
}
#doti{
width:14px;
height:14px;
border-radius:50%;
background:#fff;
float:left;
margin:010px;
cursor:pointer;
}
#doti.current{
background:rgb(161,1,34);
}
#pages{
height:60px;
width:100%;
position:absolute;
top:calc(50%-30px);
cursor:pointer;
}
#pagesi{
width:30px;
height:60px;
background:rgb(0,0,0);
font-size:22px;
color:#fff;
text-align:center;
line-height:60px;
opacity:0.5;
font-style:normal;
position:absolute;
user-select:none;
}
#pagesi.gt{
right:0;
top:0;
font-size:21px;
}
#pagesi:hover{
opacity:0.7;
}

^ v

varlis=$("li",$("#ul")), liHeight=lis[0].offsetHeight, len=lis.length; c=1;n=2; varfirst=lis[0].cloneNode(true), last=lis[len-1].cloneNode(true); $("#ul").insertBefore(last,lis[0]); $("#ul").appendChild(first); varhtml=""; for(vari=0;i=len){ n=2; c=1; css($("#ul"),"top",-liHeight+"px"); }elseif(n<=1){ c=len-2; n=len-1; css($("#ul"),"top",c*-liHeight+"px"); } }); vardotIndex=n-1; if(dotIndex===len-2) dotIndex=0; elseif(dotIndex===-1) dotIndex=len-3; for(leti=0;i

更多关于轮播图效果的专题，请点击下方链接查看学习

javascript图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

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

返回顶部
3162201930
czq8825@qq.com

原生JS无缝滑动轮播图

热门推荐

随机推荐