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

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

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

实现轮播图

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

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

HTML代码：

<div class="fate">
 <div class="lancer">
 <ul class="saber">
 <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
 <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
 <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
 <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
 <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
 </ul>
 </div>
 </div>
 <div class="archer">
 <button class="goup" onclick="goup()"><</button> 
 <button class="godown" onclick="godown()">></button>
</div>

CSS代码：

* {
 transition: all 1s;
 margin: 0px;
 padding: 0px;
}

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

ul li {
 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代码：

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

如有错误望指出。

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

<div class="fate">
 <div class="saber">
 <ul>
 <li class="archer active"><img src="img/illust_13010631_20191118_150928.jpg"></li>
 <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
 <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
 <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
 <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
 </ul>
 </div>
 </div>
 <div class="lancer">
 <button id="goup">></button>
 <button id="godown"><</button>
</div>

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代码

var pic = document.getElementsByTagName("li");
 var archer = document.getElementsByClassName("archer");
 var goup = document.getElementById("goup");
 var godown = document.getElementById("godown");
 var index = 0;
 goup.onclick = function() {
 for (var i = 0; i < pic.length; i++) {
 pic[i].className = "archer";
 }
 if (index < 4) {
 index++;
 } else {
 index = 0;
 }
 pic[index].className = "active";

 }
 godown.onclick = function() {
 for (var i = 0; i < pic.length; i++) {
 pic[i].className = "archer";
 }
 if (index > 0) {
 index--;
 } else {
 index = 4;
 }
 pic[index].className = "active";

 }

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

结语

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

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