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

前端  /  管理员 发布于 7年前   214

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

实现轮播图

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

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

HTML代码：

 
 
  
  
   
   
   
  
    
  <   >

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

    
      
        
        
        
        
        
      
        
    >    <

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实现纵向轮播图（初级版）
• JS实现横向轮播图（初级版）
• 原生js实现无缝轮播图
• JS实现轮播图效果
• js实现旋转木马轮播图
• 原生js实现轮播图的示例代码
• js实现轮播图的完整代码
• js实现支持手机滑动切换的轮播图片效果实例
• js实现点击左右按钮轮播图片效果实例
• JS实现横向轮播图（中级版）