尤 川豪   ·  2月前
Exp. 1,209  ·  152 貼文  ·  114 留言

網頁嬰兒自學教材:第2課 ── 親手做一個:輪播幻燈片

第2課 課程目標

做出能夠輪流播放不同圖片的幻燈片效果。

你會在這個過程中順便學會:

  • JavaScript 的基本觀念
  • 程式設計的基本觀念
  • 動態操作瀏覽器 DOM 的觀念

第2課 課程內容

第一課我們要繼續學習基本的 JavaScript 與 jQuery。

請參考以下教學,學一點 JavaScript 的基本觀念。這些也是程式設計的基本觀念:

接著學一下怎麼使用 JavaScript 去操作網頁上的元素:

內容不用全部讀懂,只要讀到你覺得能夠做出作業即可。

第2課 作業

這次的作業要做輪播幻燈片效果。這效果在各種購物網站、新聞媒體網站都很常見。

請分三個步驟寫這次的作業。

步驟一

在網頁上做出一個黑色背景的區塊,然後在中間放一個圖片元素,圖片元素的內容先留白。

步驟二

在網路上找5張漂亮的圖片:

https://unsplash.com

把這5張圖片的網址存在一個 JavaScript 陣列裡面。

步驟三

在網頁上做出兩個按鈕:「播放下一張」、「播放上一張」按鈕。

在按鈕上加上效果:

按「播放下一張」按鈕,按照陣列內的圖片順序,將圖片元素的網址換成下一張圖片。

按「播放上一張」按鈕,按照陣列內的圖片順序,將圖片元素的網址換成上一張圖片。

連續按這兩個按鈕幾次試試看,是不是能順利播放圖片了。

完成這些,你就完成這次的課程目標了!

  分享   共 397 次點閱
共有 0 則留言
您的留言