輪播圖是前端很常用的一個(gè)網(wǎng)頁(yè)特效,幾乎所有的網(wǎng)站或多或少都會(huì)用到這個(gè)特效.輪播圖的插件也有很多,用jQuery寫(xiě)起來(lái)也不難.這里分享一個(gè)使用vue的輪播圖效果.可以點(diǎn)擊連接查看效果vue實(shí)現(xiàn)輪播圖
以上的效果主要模仿自小米商城,里面的圖片也來(lái)源于此.輪播的效果是淡入淡出效果,采用的是vue的過(guò)渡transition,結(jié)合css3動(dòng)畫(huà)實(shí)現(xiàn).
這里可以查看源代碼,源碼采用vue-cli構(gòu)造,主要內(nèi)容在slide組件中,,可以直接復(fù)制slide組件的內(nèi)容,在要使用的地方,注冊(cè)slide組件,HTML結(jié)構(gòu)里面直接寫(xiě)上slide標(biāo)簽即可.可自定義輪播圖的大小,輪播速度,傳vue的props屬性,對(duì)應(yīng)inv,styleObject中的寬高.
<slide :slides="slides" :inv="inv" :style="styleObject"></slide>
<script>
import slide from '@/components/slide.vue'
export default{
components: {slide},
data () {
return {
slides: [
{
src: 'http://i3.mifile.cn/a4/xmad_14913974588712_tsRvc.jpg'
},
{
src: 'http://i3.mifile.cn/a4/xmad_14915894814419_zNYsr.jpg'
},
{
src: 'http://i3.mifile.cn/a4/xmad_14913784864515_mkpqH.jpg'
},
{
src: 'http://i3.mifile.cn/a4/xmad_14908694250786_fObqa.jpg'
},
{
src: 'http://i3.mifile.cn/a4/xmad_14913755624659_gRtNH.jpg'
}
],
inv: 2000,
styleObject: {
width: '1226px',
height: '460px'
}
}
}
}
</script>
