第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

【九月打卡】第15天 javascript(按鈕切換圖片)

標(biāo)簽:
Html5 JavaScript CSS3

1.课程名称:按钮切换图片


课程章节:javascript(按钮切换图片)


2.课程内容:

        我们需要把左右两边得切换图片键实现,上切换一张和下一张功能

        https://img2.sycdn.imooc.com/63272256000129b518110845.jpg

    给上一张和下一张得按钮给予id

    https://img2.sycdn.imooc.com/632723060001956911660531.jpg    

    给予全局,方便获取

    prev=byid("prev"),

    next = byid("next")

    https://img2.sycdn.imooc.com/632724f90001092e14550545.jpg

    拿取后,我们先写next,切换下一页

    鼠标点击下一页,索引++,然后调用changeing();

    https://img3.sycdn.imooc.com/6327295b00012d6712330313.jpg


    效果:

    https://img2.sycdn.imooc.com/63272ace0001c21315570655.jpg

     会出现bug,点击后会显示空白,因为设置了index++,这样会无限添加下去,自然不会回到第一张

     所以我们需要添加一个判断

        if(index>=len)index=0;

    如果索引大于图片得长度,就把它归零

    https://img3.sycdn.imooc.com/63272d1e00019d7215050922.jpg

    

    下一页完成,然后我们去处理上一页,需要index--; 直接index--;0会变成-1,所以也是取不到图片得,所以

    也需要做一个判断。

    prev.onclick = function(){

        index--;

    if(index<0)index = len -1;

    changeing();

    

}

    

 https://img4.sycdn.imooc.com/632735a1000195a910540766.jpg   

效果:

https://img4.sycdn.imooc.com/6327363a0001fece16580733.jpg


总体完成了

    上一页和下一页可以自由切换



三 本章重点,   获得图片最后一张永远是 len-1 

本节完!O(∩_∩)O







    


點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
數(shù)據(jù)庫(kù)工程師
手記
粉絲
5
獲贊與收藏
0

關(guān)注作者,訂閱最新文章

閱讀免費(fèi)教程

  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消