代碼講解:

<!--

-->

這個(gè)是html頁(yè)面的注釋寫法。

在注釋里面,寫明程序的功能,作者,創(chuàng)作時(shí)間等。

<script src=&#34;jquery.min.js&#34;></script>

這個(gè)是引用jquery庫(kù),要使用" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > html網(wǎng)頁(yè)實(shí)現(xiàn)翻頁(yè)

html網(wǎng)頁(yè)實(shí)現(xiàn)翻頁(yè)

時(shí)間:2023-10-06 04:12:02 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)

時(shí)間:2023-10-06 04:12:02 來(lái)源:網(wǎng)站運(yùn)營(yíng)

html網(wǎng)頁(yè)實(shí)現(xiàn)翻頁(yè):html網(wǎng)頁(yè)實(shí)現(xiàn)翻頁(yè)




代碼講解:

<!--

-->

這個(gè)是html頁(yè)面的注釋寫法。

在注釋里面,寫明程序的功能,作者,創(chuàng)作時(shí)間等。

<script src="jquery.min.js"></script>

這個(gè)是引用jquery庫(kù),要使用jquery庫(kù)的功能,就要寫這句代碼。

<script></script>

在這里面寫js代碼,實(shí)現(xiàn)你需要的功能。

重點(diǎn)就是在這里:

網(wǎng)頁(yè)上有2個(gè)按鈕,左翻頁(yè),右翻頁(yè)。

簡(jiǎn)單設(shè)計(jì)了一下按鈕的外觀樣式。

網(wǎng)頁(yè)上還有一個(gè)div顯示當(dāng)前的頁(yè)數(shù)。

分析網(wǎng)頁(yè)的行為,

當(dāng)用戶點(diǎn)擊左翻頁(yè)的時(shí)候,

頁(yè)數(shù)要減1

當(dāng)頁(yè)數(shù)為1的時(shí)候,

頁(yè)數(shù)就被翻到了最大頁(yè)數(shù)。

當(dāng)用戶點(diǎn)擊右翻頁(yè)的時(shí)候,頁(yè)數(shù)加1,如果頁(yè)數(shù)是最大頁(yè),就變?yōu)榱?

這就是說(shuō),無(wú)論減,還是加,都必須保證頁(yè)數(shù)在1-最大頁(yè)數(shù)之間。

一旦進(jìn)行減,加操作導(dǎo)致頁(yè)數(shù)不在范圍內(nèi)的時(shí)候,就要調(diào)整到范圍內(nèi)。




然后,寫代碼。

要熟悉jquery的語(yǔ)法規(guī)則。

$美元選擇器,選擇html上的元素

.click這個(gè)元素被點(diǎn)擊,發(fā)生了一個(gè)事件。

function這個(gè)是函數(shù),發(fā)生了事件以后怎么處理,就寫在這里。

熟悉一下流程控制,if else

搞清楚了網(wǎng)頁(yè)的行為,就知道了邏輯思路了。










<!-- --><script src="jquery.min.js"></script><script>var i=1;var max_value=10;$("document").ready(function() { $("#jian").click(function () { if(i==1) { i=max_value; $(".show").text(i); } else { i =i-1; $(".show").text(i); } }); $("#jia").click(function () { if(i==max_value) { i=1; $(".show").text(i); } else { i=1+i; $(".show").text(i); } });});</script><style>.anniu{ width:100px; height:50px; background:red;}.show{width:100px;height:50px;background:rgb(143,231,163);text-align:center;line-height:50px;}.anniu,.show{float:left;}</style><div> <div class="anniu" id="jian" ><img src="zuo.png" width=100px height=50px></div> <div class="show"> 1</div> <div class="anniu" id="jia"><img src="you1.png" width=100px height=50px></div></div>

關(guān)鍵詞:實(shí)現(xiàn)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉