JS代碼實(shí)現(xiàn)頁(yè)面切換效果
本文實(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 >上一頁(yè)</button> <button class='btn'>1</button> <button class='btn'>2</button> <button class='btn'>3</button> <button class='btn'>4</button> <button >下一頁(yè)</button> </div> <div> <div class='item active'><img src='http://www.leifengta.com.cn/bcjs/img/1.png' /></div> <div class='item'><img src='http://www.leifengta.com.cn/bcjs/img/2.png' /></div> <div class='item'><img src='http://www.leifengta.com.cn/bcjs/img/3.png' /></div> <div class='item'><img src='http://www.leifengta.com.cn/bcjs/img/4.png' /></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í)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 在IDEA中實(shí)現(xiàn)同時(shí)運(yùn)行2個(gè)相同的java程序2. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)3. Java如何基于反射機(jī)制獲取不同的類4. IntelliJ IDEA安裝插件的方法步驟5. Android table布局開(kāi)發(fā)實(shí)現(xiàn)簡(jiǎn)單計(jì)算器6. asp判斷某個(gè)文件是否存在的函數(shù)7. 理解PHP5中static和const關(guān)鍵字8. ASP.NET泛型三之使用協(xié)變和逆變實(shí)現(xiàn)類型轉(zhuǎn)換9. Python包資源下載路徑報(bào)404解決方案10. .NET Core Web APi類庫(kù)內(nèi)嵌運(yùn)行的方法
網(wǎng)公網(wǎng)安備