如何用JavaScript和z-index技术制作轮播图特效？

本文共计877个文字，预计阅读时间需要4分钟。

本文分享了JavaScript实现轮播图效果的完整代码示例，供大家参考学习。以下内容包含实现轮播图和前端差异等要点，简要记录如下：

实现轮播图效果学习前端差异

由于篇幅限制，以下内容将直接输出结果：

轮播图示例 .slider { width: 300px; height: 200px; overflow: hidden; position: relative; } .slides { display: flex; transition: all 0.5s ease; } .slide { width: 300px; height: 200px; flex-shrink: 0; } 1 2 3

以上代码实现了一个简单的轮播图效果，您可以根据需求调整样式和功能。祝您学习愉快！

本文实例为大家分享了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来实现轮播，但是生硬。

结语

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

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