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

第2課 課程目標

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

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

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

第2課 課程內容

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

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

• https://www.w3schools.com/js/default.asp
• https://www.w3schools.com/js/js_intro.asp
• https://www.w3schools.com/js/js_whereto.asp
• https://www.w3schools.com/js/js_variables.asp
• https://www.w3schools.com/js/js_operators.asp
• https://www.w3schools.com/js/js_arithmetic.asp
• https://www.w3schools.com/js/js_assignment.asp
• https://www.w3schools.com/js/js_arrays.asp
• https://www.w3schools.com/js/js_comparisons.asp
• https://www.w3schools.com/js/js_if_else.asp
• https://www.w3schools.com/js/js_loop_for.asp
• https://www.w3schools.com/js/js_objects.asp

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

• https://www.w3schools.com/jsref/dom_obj_document.asp
• https://www.w3schools.com/jsref/dom_obj_all.asp
• https://www.w3schools.com/jsref/dom_obj_image.asp
• https://www.w3schools.com/jsref/prop_img_src.asp

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

第2課 作業

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

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

步驟一

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

步驟二

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

https://unsplash.com

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

步驟三

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

在按鈕上加上效果：

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

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

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

完成這些，你就完成這次的課程目標了！