使用JavaScript怎么編寫一個頁面切換效果

發(fā)布時間：2021-01-11 14:15:40 來源：億速云閱讀：285 作者：Leah 欄目：開發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)使用JavaScript怎么編寫一個頁面切換效果，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

HTML+CSS部分

添加所有頁面，和上一頁、具體頁、下一頁的按鈕，
設(shè)置div樣式，默認第一頁顯示，其他頁隱藏。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  .item {
  display: none;
  width: 300px;
  height: 400px;
  overflow: hidden;
  position: relative;
  }  
  .item>img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  } 
  .item.active {
  display: block;
  }
 </style>
 </head>
 <body>
 <div>
  <button class="prev" >上一頁</button>
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="next" >下一頁</button>
 </div>
 <div>
  <div class="item active"><img src="img/1.png" height="1191" width="820" /></div>
  <div class="item"><img src="img/2.png" height="1191" width="820" /></div>
  <div class="item"><img src="img/3.png" height="1191" width="820" /></div>
  <div class="item"><img src="img/4.png" height="1191" width="820" /></div>
 </div>
 </body>
</html>

js部分

通過按鍵來實現(xiàn)頁面的功能

<script type="text/javascript">
 //封裝函數(shù)、圖片顯示的部分、傳入獲取到的div，和被點擊的序號
 function toggle(eles, active) {
  for(var i = eles.length; i--;) {
   eles[i].className = "item"; //先讓所有div隱藏
  }
  eles[active].className = "item active";//再讓被點擊的序號對應(yīng)的div 顯示
  }
  //獲取按鍵和div
  var aBtn = document.getElementsByClassName("btn");
  var aIem = document.getElementsByClassName("item");
  var prev = document.getElementsByClassName("prev");
  var next = document.getElementsByClassName("next");
  var nowPage = 0; //定義當(dāng)前頁，默認值為0；
    
  for(var i = aBtn.length; i--;) {
   aBtn[i].tab = i;
   aBtn[i].onclick=function(){
   toggle(aIem,this.tab);
   nowPage=this.tab; //被點擊后，保存當(dāng)前頁的序號
   }
  }
   //下一頁
  next[0].onclick = function () {  
   nowPage++;   
   nowPage %= aBtn.length;
   toggle(aIem,nowPage);
  }
  //上一頁
  prev[0].onclick=function(){
  nowPage--;
  if(nowPage ==-1){
   nowPage = aBtn.length-1;
  }
 toggle(aIem,nowPage);  
 }
</script>

上述就是小編為大家分享的使用JavaScript怎么編寫一個頁面切換效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

使用JavaScript怎么編寫一個頁面切換效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽