遞進式實踐教學模式在輪播圖制作教學中的實踐與應用

張榮茜，鄭 爽，崔 玲

(北京工業大學 信息學部，北京 100024)

0 引言

在網頁制作過程中，為了展示更多的圖片，可能會遇到需要做成輪播的效果。輪播圖是指多張圖片在網頁中相同位置有規律的滾動播放，可以達到在有限的頁面中展示更多信息的效果。也是目前PC端與移動端頁面被廣泛采用的一種圖片、廣告等展示的方式，使得頁面具有更高的可讀性，提升了用戶體驗。但是在實現過程中需要用到javascript中函數、循環、數組以及css等多個方面的內容，這也是網頁前端教學中的一個難點。學生很容易在動手操作的過程中放棄，一些學生上網下載插件就算完成任務，這樣學生處于被動學習狀態，對實驗過程印象不深刻，不利于發揮學生的學習主動性，也難以提高學生的動手能力和創新能力。在教學過程中引入遞進式模式，由易入難，降低學習難度，提升學生主動動手興趣。

1 輪播圖制作課程引用遞進式實踐教學模式

遞進式教學法是教師通過對教學任務進行分析，按照由淺入深、由易到難的順序開展教學過程的方法。先單一后綜合，實現基礎知識---基本能力——專業能力——綜合能力逐步提升、層層遞進的立體化培養。在網頁編程基礎實驗教學中引入遞進式教學模式，將所需要做的練習建立聯系，使各個實驗前后銜接，即后面所做的實驗可通過對前面所做的實驗進行修改來完成。遵循“循序漸進”的教學原則。

遞進式教學模式是將教學內容分為3個層級，即基礎內容、設計內容、綜合設計內容。先做基礎性實驗內容，即先能夠顯示一張圖片，然后定時切換圖片，加上一張下一張按鈕，最后綜合實驗，完成一個功能齊全的輪播圖,并引導學生在此基礎上完成定時自動播放功能。遞進式教學模式采用前后銜接、層次分明的內容設計，使學生在基礎內容的基礎上將所學知識融會貫通，并通過修改完成綜合性實驗。遞進式教學模式需要學生在徹底了解前面內容的基礎上完成，有多種完成方法，因此遞進式實驗的設計給予學生極大的發揮空間，有助于學生發揮學習的主動性。

2 輪播圖制作課程引用遞進式實踐教學模式

目前在教學過程中常見的輪播圖制作方法有四種：

第一種利用swiper插件實現輪播圖。

第二種利用Jquery實現輪播

第三種利用JavaScript實現輪播

第四種利用CSS實現輪播。

其中第一種、第二種方法僅需要修改輪播圖片的url即可，在實驗教學過程中選擇第三種、第四種結合的方式，一方面可以引導學生對基礎知識的理解，另一方面對學生今后在其他插件、框架的應用上提供更好的幫助。同時在教學過程中引入了遞進式教學方法，豐富了實驗教學手段。

以結合css與javascript的原生方法實現圖片輪播效果為例，分析遞進式實踐教學模式在web制作實驗教學中的應用。

第二步：設置初始切換圖片函數（引入事件加載處理順序問題與setInterval方法）

在Javascript中定義切換函數，通過修改圖片路徑來實現圖片的切換

對于圖片路徑的限制，采用新建一個數組存放圖片路徑的方法解決，并修改index為數組下標0。

現在已經完成輪播圖的基本功能。

拋出問題：按鈕實現上一張，下一張功能。有能力的同學在完成該功能的基礎上實現定時自動切換圖片的效果。

3 結束語

在網頁編程基礎教學中合理應用遞進式實踐教學模式，強調學生個體差異區分并實施“教、學、做”一體化教學過程，為學生帶來新穎的學習體驗。教學實踐表明該方法易于理解，便于接受，在后續學生提交的作業中來看取得了良好效果。