微客导航 » 文章资讯 » js实现轮播图效果 z-index实现轮播图

js实现轮播图效果 z-index实现轮播图

2023-08-02 22:28:04 353

本文实例为大家分享了js实现轮播图效果的具体代码，供大家参考，具体内容如下

实现轮播图

学习前端差不多两三个月，在这里记录分享一下。因本人菜鸟一枚，希望大佬们多多指点，勿喷。

通过计算每一张图片高度实现滑动轮播图

HTML代码：

< >

CSS代码：

*{
transition:all1s;
margin:0px;
padding:0px;
}

.fate{
position:absolute;
top:0%;
width:512px;
height:512px;
overflow:hidden;
}

ulli{
list-style:none;
}
.lancer{
position:absolute;
top:0%;
width:100%;
height:100%;
}
.saber{
top:0px;
position:absolute;
}
.archer{
position:absolute;
}
button{
z-index:99;
}

JS代码：

varindex=0;
functiongodown(){
varli=document.getElementsByTagName("li");
//获取单个li宽度（单张图片高度）
varliHeight=li[0].scrollHeight;

vargoup=document.getElementsByClassName("goup");
varlancer=document.getElementsByClassName("lancer")[0];
if(index<4){
index++;
}else{
index=0;
}
lancer.style.top=-index*liHeight+"px";
}
functiongoup(){
varli=document.getElementsByTagName("li");
//获取单个li宽度（单张图片高度）
varliHeight=li[0].scrollHeight;

vargoup=document.getElementsByClassName("goup");
varlancer=document.getElementsByClassName("lancer")[0];
if(index>0){
index--;
}else{
index=4;
}
lancer.style.top=-index*liHeight+"px";
}

如有错误望指出。

利用z-index实现轮播图
HTML代码

> <

CSS代码

li{
list-style:none;
}

.archer{
position:absolute;
top:0%;
display:none;
}

.active{
display:block;
}

button{
position:absolute;
top:70%;
width:50px;
}

#goup{
left:400px;
}

#godown{
left:0px;
}

JS代码

varpic=document.getElementsByTagName("li");
vararcher=document.getElementsByClassName("archer");
vargoup=document.getElementById("goup");
vargodown=document.getElementById("godown");
varindex=0;
goup.onclick=function(){
for(vari=0;i0){
index--;
}else{
index=4;
}
pic[index].className="active";

}

利用index来实现轮播，但是生硬。

结语

以上就是两种方法实现轮播图效果。

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

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

返回顶部
3162201930
czq8825@qq.com

js实现轮播图效果 z-index实现轮播图

热门推荐

随机推荐