快捷導(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)文章

微信小程序分包加載的實(shí)現(xiàn)代碼
分包加載是一種小程序優(yōu)化技術(shù),將小程序不同功能的代碼,分別打包成不同的子包,在構(gòu)建時(shí)打包成不同的分包,用戶在使用時(shí)按需進(jìn)行加載,在構(gòu)建小程序分包項(xiàng)目時(shí),構(gòu)建會(huì)輸出一個(gè)或多個(gè)分包,這篇文章主要介紹了微信小程序---分包加載,需要的朋友可以參考下
2024-07-07
深入淺析JSONAPI在PHP中的應(yīng)用
這篇文章主要介紹了深入淺析JSONAPI在PHP中的應(yīng)用,需要的朋友可以參考下
2017-12-12
javascript父子頁(yè)面通訊實(shí)例詳解
這篇文章主要介紹了javascript父子頁(yè)面通訊的實(shí)現(xiàn)方法,實(shí)例分析了javascript針對(duì)父子頁(yè)面通訊的原理與相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
深入剖析JavaScript instanceof 運(yùn)算符
這篇文章主要介紹了深入剖析JavaScript instanceof 運(yùn)算符,ECMAScript 引入了另一個(gè) Java 運(yùn)算符 instanceof 來(lái)解決這個(gè)問(wèn)題。instanceof 運(yùn)算符與 typeof 運(yùn)算符相似，用于識(shí)別正在處理的對(duì)象的類型。,需要的朋友可以參考下
2019-06-06
js以及jquery實(shí)現(xiàn)手風(fēng)琴效果
這篇文章主要為大家詳細(xì)介紹了js版本實(shí)現(xiàn)手風(fēng)琴效果和jquery版本實(shí)現(xiàn)的手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
JS拖拽排序插件Sortable.js用法實(shí)例分析
這篇文章主要介紹了JS拖拽排序插件Sortable.js用法,結(jié)合實(shí)例形式分析了拖拽排序插件Sortable.js功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-02-02
fullCalendar日歷插件玩法示例解析
這篇文章主要介紹了fullCalendar日歷插件玩法示例解析,包括Fullcalendar安裝,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-01-01
微信小程序自定義底部彈出框動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義底部彈出框動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
js+html5 canvas實(shí)現(xiàn)ps鋼筆摳圖
這篇文章主要介紹了js+html5 canvas實(shí)現(xiàn)ps鋼筆摳圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
js+css3實(shí)現(xiàn)簡(jiǎn)單時(shí)鐘特效
這篇文章主要為大家詳細(xì)介紹了js+css3實(shí)現(xiàn)簡(jiǎn)單時(shí)鐘特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09