昨天寫了一個草帽海賊團的動態網頁，用的是原生JS寫的，個人感覺網頁的風格還是挺不錯的。

網頁采用了fullpage的技術，通過鼠標滾輪切換顯示的內容，也可同過頭部文字或右側的小圓點導航到相應的頁面

首頁是一個用JS寫的自動輪播和手動輪播組合的的輪播圖，如下圖

后續的幾頁都是單獨每人一頁，我并沒有對人物進行過多的介紹，只是簡單的寫了基本信息而已，組成的是相對于的人物圖片，我將圖片制作成了相框，個人感覺風格看起來比較好，再加上JS控制動畫，網頁整體顯示效果個人感覺挺酷的

網頁內所有的圖片都是從網上找的，再用PS扣成PNG格式的，看起來才不會與每一頁的背景圖其沖突

如下圖：是單獨路飛的一頁?

好了，說這么多還不如直接上作品，感興趣的可以通過：http://yezhazha.3vkj.net/?該網址訪我的作品（注：網頁不是響應式的，需要從PC端瀏覽，還望見諒），里面還包含了其他幾個，例如音樂播放器、小游戲等，網頁的加載比較慢，還望見諒。

8、最后再附上海賊王網頁的源碼跟原圖：JS的內容有詳細的注釋，應該不難看懂

鏈接：https://pan.baidu.com/s/11pMU3JGCMlKDQuSdqUaItA?
提取碼：hmx7

----------------------------------------------------------------------------

2020/12/30更新以下點

由于H5期末大作業要求，需要有一個首頁，八個子頁，所有在其原有基礎上增添了三頁新的內容

性能優化:

由于該網頁圖片過多,已對網頁中所有img標簽的圖片進行了圖片懶加載，只有當切入當前顯示的屏，才會發送請求獲取圖片，避免一打開網頁就將所有img請求都發出去(谷歌的并發請求數是有限制的，超過該數，其他請求會阻塞，只有等請求完成后才能繼續進行獲取圖片請求)

對函數進行了防抖處理，避免函數高頻觸發

網頁效果:

添加了'打字機'效果的文字，會在切換到當前屏后觸發調用，將文字一個個打到網頁上

增加了視頻播放，引入了抖音兩個關于草帽海賊團的視頻

放置了一個賞金翻轉圖片墻，正面為人物圖，鼠標移入后會翻轉顯示其對應的賞金圖

引入了網上的小Demo-->三D立體旋轉圖片的正方形

具體效果可以訪問網頁:http://ye_0216.gitee.io/onepiece/

?

?

?

?

總結

以上是生活随笔為你收集整理的web期末大作业-前端网页--H5--海贼王动态网页源码-海贼王网页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。