微信小程序實現兩邊小中間大的輪播效果的示例代碼

不囉嗦，直接上代碼了

`imgUrls: [`
`{`
`url:` `'[http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg](http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg)'``,`
`isChange:1,`
`},`
`{`
`url:` `'[http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg](http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg)'``,`
`isChange: 2,`
`},`
`{`
`url:` `'[http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg](http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg)'``,`
`iChange: 3,`
`},`
`],`

字段isChange是用來判斷圖片樣式的

頁面代碼

`<swiper indicator-dots=``"{{false}}"` `autoplay=``"{{false}}"` `previous-margin=``'80rpx'` `next-margin=``'80rpx'` `bindchange=``'swiperChange'``>`
`<block wx:``for``=``"{{imgUrls}}"` `wx:``for``-item=``'item'` `wx:key=``''``>`
`<swiper-item>`
`<view class=``"shuffing-item {{item.isChange==2?'shuffing-item-next':item.isChange==0?'shuffing-item-preo':''}}"``>`
`<image src=``"{{item.url}}"``></image>`
`<view class=``'shuffing-mask'``>`
`<text>開啓不老童話</text>`
`<text>></text>`
`</view>`
`</view>`
`</swiper-item>`
`</block>`
`</swiper>`

樣式代碼

`swiper{`
`height``:``520``rpx;`
`margin``:``20``rpx` `30``rpx;`
`}`
`.shuffing{`
`text-align``:` `center``;`
`width``:``100%``;`
`position``:` `relative``;`
`}`
`.shuffing-item{`
`position``:` `absolute``;`
`width``:``100%``;`
`lef``:``50%``;`
`top``:``50%``;`
`transform: translateX(``-50%``) translateY(``-50%``);`
`height``:``520``rpx;`
`transition:` `all` `0.3``s;`
`}`
`.shuffing-item-next{`
`width``:``85%``;`
`height``:``85%``;`
`transform:translateX(``-100%``) translateY(``-50%``);`
`transition:` `all` `0.3``s;`
`}`
歡迎加入全棧開發交流划水交流圈：582735936
面向划水1-3年前端人員
幫助突破划水瓶頸，提高思惟能力
`.shuffing-item-preo{`
`width``:``85%``;`
`height``:``85%``;`
`transform:translateX(``40%``) translateY(``-50%``);`
`transition:` `all` `0.3``s;`
`}`
`.shuffing-item>image{`
`width``:``100%``;`
`height``:``100%``;`
`}`
`.shuffing-mask{`
`position``:` `absolute``;`
`bottom``:` `0``;`
`width``:``100%``;`
`line-height``:` `60``rpx;`
`background``: rgba(``0``,``0``,``0``,``0.6``);`
`color``:``#fff``;`
`display``: flex;`
`justify-``content``: space-between;`
`padding``:``0` `20``rpx;`
`}`