最近寫公司項目有涉及到輪播banner，一般的ui框架無法滿足產品需求；所以自己寫了一個層疊式輪播組件；現在分享給大家； 主要技術棧是vue.js ;javascript;jquery；確定實現思路因工作繁忙，暫時不做梳理了；直接貼代碼參考； 此組件是基於jquer封裝，在vue項目 ...

/* Start 基本樣式*/ * { margin: 0; padding: 0; } u ...

注意：圖片需要自己去添加images文件，大小我用的是400*300，可以更改的！ 還有其他方法使用js實現輪播圖，比如點擊以后讓圖片transform：translate；點擊后改變其display，點擊后改變z-index，不點擊讓他自己產生動態移動就是使用 ...

實現 　實現如圖所示的輪播圖，要實現的功能主要有： 鼠標經過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕。 點擊右側按鈕一次，圖片下滑一張；點擊左側按鈕，圖片上滑一張。 圖片播放的同時，下面小圓圈模塊跟隨一起變化。 點擊小圓圈，可以播放相應圖片。 鼠標不經過輪播圖，輪播 ...

HTMl部分 CSS部分 js部分 ...

...

先實現靜態的輪播圖 index.vue index.css ...

利用 Vue-Awesome-Swiper插件來做輪播效果，github地址：https://github.com/surmon-china/vue-awesome-swiper 安裝 ...