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