mip-carousel 多圖輪播

2018-11-07 17:29 更新

mip-carousel 用來支持 mip 中圖片的一種展示方式,支出多圖輪播。

標(biāo)題內(nèi)容
類型通用
支持布局fixed-height,responsive
所需腳本

示例

基本使用

<mip-carousel  
    width=600 
    height="400">
    <mip-img 
        src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">
    </mip-img>
    <mip-img 
        src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    </mip-img>
    <mip-img 
        src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

自動(dòng)輪播

<mip-carousel
    autoplay  
    width=600 
    height="400">
    <mip-img 
        src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">
    </mip-img>
    <mip-img 
        src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    </mip-img>
    <mip-img 
        src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

設(shè)置輪播時(shí)間間隔

<mip-carousel
    autoplay
    defer="1000"  
    width=600 
    height="400">
    <mip-img 
        src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">
    </mip-img>
    <mip-img 
        src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    </mip-img>
    <mip-img 
        src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

點(diǎn)擊圖片跳轉(zhuǎn)

<mip-carousel
    autoplay
    defer="1000" 
    width=600 
    height="400">
    <mip-img 
        src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">
    </mip-img>
    <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">
        <mip-img 
            src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
        </mip-img>
    </a>
    <mip-img 
        src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

屬性

width

說明:寬度,不是實(shí)際寬度,與高度屬性配合來設(shè)置圖片比例
必選項(xiàng):是
類型:數(shù)字
單位:無
默認(rèn)值:無

height

說明:高度,不是實(shí)際高度,與寬度屬性配合來設(shè)置圖片比例
必選項(xiàng):是
類型:數(shù)字
單位:無
默認(rèn)值:無

autoplay

說明:自動(dòng)輪播開關(guān)
必選項(xiàng):否
類型:字符串或空
取值:"",autoplay
單位:無
默認(rèn)值:無

defer

說明:每次輪播的時(shí)間間隔,如果設(shè)置了autoplay,可以添加defer來指定輪播的時(shí)間間隔
必選項(xiàng):否
類型:數(shù)字
單位:ms
默認(rèn)值:2000

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)