快捷導(dǎo)航

JS代碼實(shí)現(xiàn)頁(yè)面切換效果

更新時(shí)間：2021年01月10日 11:21:28 作者：_Adoph

這篇文章主要為大家詳細(xì)介紹了JS代碼實(shí)現(xiàn)頁(yè)面切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS代碼實(shí)現(xiàn)頁(yè)面切換效果的具體代碼，供大家參考，具體內(nèi)容如下

HTML+CSS部分

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

<!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" >上一頁(yè)</button>
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="next" >下一頁(yè)</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部分

通過(guò)按鍵來(lái)實(shí)現(xiàn)頁(yè)面的功能

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript Spread Syntax (...）的十種使用方法
這篇文章主要介紹了JavaScript Spread Syntax (...）的十個(gè)強(qiáng)大用途，擴(kuò)展語(yǔ)法即Spread Syntax(…) 是 ES6 中引入的一個(gè)新特性，它允許我們從可迭代對(duì)象中快速提取元素
2022-07-07
JavaScript實(shí)現(xiàn)x秒后自動(dòng)跳轉(zhuǎn)到一個(gè)頁(yè)面
今天看視頻學(xué)習(xí)時(shí)學(xué)習(xí)了一種新技術(shù)，即平時(shí)我們?cè)谝粋€(gè)頁(yè)面點(diǎn)擊“提交”或“確認(rèn)”會(huì)自動(dòng)跳轉(zhuǎn)到一個(gè)頁(yè)面,在網(wǎng)上搜了一下，關(guān)于這個(gè)技術(shù)處理有多種方法,有興趣的朋友可以參考下
2013-01-01
JavaScript的11個(gè)小技巧整理
這篇文章介紹了JavaScript的11個(gè)小技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
基于JavaScript實(shí)現(xiàn)圖片剪切效果
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)圖片剪切效果,本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
js實(shí)現(xiàn)敏感詞過(guò)濾算法及實(shí)現(xiàn)邏輯
這篇文章主要介紹了js實(shí)現(xiàn)敏感詞過(guò)濾算法及實(shí)現(xiàn)邏輯，文中介紹了dfa算法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-07-07
微信小程序使用Socket的實(shí)例
這篇文章主要介紹了微信小程序使用Socket的實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下
2017-09-09
圖像替換新技術(shù) 狀態(tài)域方法
熟悉css的開(kāi)發(fā)者一定知道圖像替換技術(shù)，也深知它的意義，Dave Shea 曾在他的一篇文章對(duì)此做了詳細(xì)的總結(jié)
2010-01-01
js實(shí)現(xiàn)自動(dòng)鎖屏功能
有這么一個(gè)需求，開(kāi)發(fā)了一套系統(tǒng)，當(dāng)用戶離開(kāi)桌面或者一段時(shí)間不操作的話，需要把該系統(tǒng)所有打開(kāi)頁(yè)面鎖定起來(lái)，本文就詳細(xì)的介紹一下，感興趣的可以了解一下
2021-06-06
微信小程序動(dòng)態(tài)修改頁(yè)面數(shù)據(jù)及參數(shù)傳遞過(guò)程詳解
這篇文章主要介紹了微信小程序動(dòng)態(tài)修改頁(yè)面數(shù)據(jù)及參數(shù)傳遞過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
面向?qū)ο罄^承實(shí)例(a如何繼承b問(wèn)題)(自寫(xiě))
經(jīng)常會(huì)看到a如何繼承b的問(wèn)題；決定寫(xiě)一下，其實(shí)繼承就是繼承父級(jí)的屬性和方法，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07