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實現輪播圖效果的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！