對于網站前端開發而言，經常遇到一些網站某些頁面帶有輪播圖功能，有些是首頁的banner模塊，有些是產品展示模塊，還有些是名人介紹、推薦新聞等等。對于這種輪播功能，自己手寫的話耗時比較長，而且手寫途中還會遇到一些問題，還會影響項目開發進度；目前網上已經有很多版本的輪播圖開源插件了，所以一般開發這類功能都是直接引用網上的開源插件，在這里推薦一下swiper插件，兼容PC移動，對于低版本的ie不兼容，但是一些常見的輪播效果上面都有demo演示。
 
近期手上有個響應式網站開發項目，其中就有輪播圖功能，簡單的輪播功能就能滿足，但是要想兼容各個終端就需要控制輪播顯示的數量，要控制顯示數量有多種方法：可以多寫幾個結構，不同的分辨率展示對應的結構；運用swiper插件及其中kreakpoints屬性，該屬性可以同時設置多個分辨率下的輪播屬性。但是在改變瀏覽器大小的時候不會即時改變屬性顯示成對應的輪播模式，這個時候就需要添加一個屬性來監聽瀏覽器分辨率的變化來實現實時改變輪播的顯示了。這個屬性就是observer
 

 
運用在實例中如下：

 

 

 

 
這樣對于一些比較靈活的輪播功能就有個比較好的兼容性，也能節省一些開發時間。