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来实现轮播，但是生硬。

感谢各位的阅读！关于“js实现轮播图效果的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！