寫一個jquery實現swiper輪播圖的案例,主要功能有自動跳到下一張圖片,點擊左右側按鈕跳轉上一張和下一張。
1.首先新建一個html頁面,編輯器自動初始化一下代碼。
2.寫一下html的dom和css部分,分為三塊:一是圖片顯示部分,二是底部原點顯示部分,三是兩側按鈕部分。
3.去bootcnd找一下jquery的鏈接,引入js。
4.實例化js,思路就是創(chuàng)建一個class,定時器方法用jq控制圓點的高亮顯示狀態(tài)然后將圖片向左平移出窗口顯示區(qū)域,初始化聲明左右兩側的點擊事件,當點擊時向左或向右平移位置,在init方法中初始化定時和點擊事件
最終的實現效果如下