codecamp

mip-carousel 多图轮播

mip-carousel 用来支持 mip 中图片的一种展示方式,支出多图轮播。

标题内容
类型通用
支持布局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>

自动轮播

<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>

设置轮播时间间隔

<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>

点击图片跳转

<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

说明:宽度,不是实际宽度,与高度属性配合来设置图片比例
必选项:是
类型:数字
单位:无
默认值:无

height

说明:高度,不是实际高度,与宽度属性配合来设置图片比例
必选项:是
类型:数字
单位:无
默认值:无

autoplay

说明:自动轮播开关
必选项:否
类型:字符串或空
取值:"",autoplay
单位:无
默认值:无

defer

说明:每次轮播的时间间隔,如果设置了autoplay,可以添加defer来指定轮播的时间间隔
必选项:否
类型:数字
单位:ms
默认值:2000

MIP 组件布局
mip-iframe
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

MIP 帮助

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }