js實現(xiàn)輪播圖效果 z-index實現(xiàn)輪播圖

更新時間：2020年01月17日 15:57:22 作者：HAG HUG

這篇文章主要為大家詳細介紹了js實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)輪播圖效果的具體代碼，供大家參考，具體內容如下

實現(xiàn)輪播圖

學習前端差不多兩三個月，在這里記錄分享一下。因本人菜鳥一枚，希望大佬們多多指點，勿噴。

通過計算每一張圖片高度實現(xiàn)滑動輪播圖

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實現(xiàn)輪播圖
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來實現(xiàn)輪播，但是生硬。

結語

以上就是兩種方法實現(xiàn)輪播圖效果。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: