JavaScript实现轮播图的两种方案：高度滑动与层级切换

作者：交互手记时间：2026-10-23 14:34:04浏览：437

本文分享两种基于JavaScript的轮播图实现方式。第一种通过计算图片高度并动态修改top值实现平滑滑动效果；第二种利用z-index控制图片层级显示，切换生硬但逻辑简单。文章包含完整的HTML结构、CSS样式及JS交互代码，适合前端初学者参考学习。

JavaScript实现轮播图的两种方案：高度滑动与层级切换

本文提供了使用JavaScript实现轮播图效果的具体代码示例，供读者参考学习。

实现轮播图效果。

作者记录前端学习约两三个月以来的心得，自谦为初学者，恳请资深开发者指正，欢迎交流。

方案一：基于高度的滑动效果

第一种方案：通过计算每张图片的高度，动态调整容器位置来实现滑动轮播效果。

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;
}

JavaScript逻辑代码如下：


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的层级切换

第二种方案：利用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;
    }

JavaScript逻辑代码如下：


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怎么实现页面强制刷新

2026-11-05 14:53:38

点击JS链接直接运行不下载？前端实现.js文件强制下载的三种方法

2026-11-05 12:12:23

怎么封装一个通用的JS创建元素辅助函数

2026-11-05 11:41:41

Swiper.js 怎么监听滑动结束并获取当前索引

2026-11-05 10:57:15

HTML、CSS和JS的关系：Web前端三件套怎么协作

2026-11-04 15:41:40