相信大家比較心細的可以發(fā)現(xiàn),我上一篇文章的背景與設計出具的是不同的,設計要求切換時背景圖片要和文章展示的圖片是一致的,那我們怎么實現(xiàn)呢,請看一下swiper的介紹。
實現(xiàn)思路無非兩種監(jiān)聽點擊切換和滑動切換,當這兩種動作被觸發(fā)時,改變背景圖片。
而另一種就是本片所示的方法,我們直接監(jiān)聽索引值變化本身,方法如下圖。
在swiper的方法中有這樣一個方法,slidechane,當索引改變就會觸發(fā),可以用this.realIndex來獲取loop循環(huán)狀態(tài)下的索引值(如果沒有開啟loop循環(huán),索引值是this.activeIndex),然后我們根據(jù)索引來實現(xiàn)背景變換就無比簡單了,這里說一下我的思路。
利用定位把背景圖片防到swiper下,然后獲得索引值后利用js改變背景圖片的style。
最后,貼一下效果。