在學習完JQ以後，大家都會感覺比js原生應用起來更方便、更快捷。課上有一個小練習，是實現簡單的輪播圖效果。現在我就分享給大家思路與代碼。
一）明確jq的作用與使用方法
1.引入JQ庫，課上練習我們使用 jquery-1.8.3.js
2. JQ可以進行鏈式編程
二）寫好HTML骨骼部分
三）給HTML 加上css樣式
我們將兩個按鈕調整透明度，用相對定位中的絕對定位，定位在整個圖片的兩側
標記紅線的位置，一定要用rgba的格式去寫透明度，用opacity 會導致空間中的文字一起變得透明，造成不好的交互感。
四）JQ部分
1. 按鈕部分
整個方法是比較簡單的，但並不是最好的方法。在JQ初學的時候，是最容易想到的解決方式。那麼，我們學習編程不是為了將代碼原封不動的背下來，而是要學習解決問題的方式方法。想好自己要做的事，需要的數據要用到哪些基礎知識，並且努力分析，然後一步一步完成代碼，最後調試。
2. 自動輪播，並且鼠標移入時停止輪播，移出時繼續輪播效果
我們可以用計時器的方法去做，鼠標移入時清除計時器，移出時執行計時器。由於代碼相同部分很多，我將其封裝成函數方便使用。
先進行計時器正常走程序，然後寫好JQ的鼠標移入移出效果，這樣我們就將這個簡單的輪播圖做好了。
提示：優化代碼
我們在以後的工作中，並不能將圖片的名字改寫成1.jpg的形式，那麼我們將如何在進行編寫輪播圖呢？那麼這裡我給大家一個提示，我們可以將圖片的路徑放入數組，接下來的步驟，請大家思考，該怎麼辦呢？
小作業：
我的一段班已經順利的完成了前端的學習，所以這裡給大家留一個小的作業。大家可以開動腦筋，將輪播圖的輪轉動畫以滑動的方式進行展現出來。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/228112.html
微信掃一掃 
支付寶掃一掃 