一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

mip-carousel 多图轮播

时间:2016-12-16 编辑:简简单单 来源:一聚教程网

标题 内容
类型 通用
支持布局 fixed-height,responsive
所需脚本

示例

response 布局

<mip-carousel 
layout="responsive" 
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 
layout="responsive"
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"
layout="responsive" 
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" 
layout="responsive" 
width="600" 
height="400" 
indicator 
> 
<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"
layout="responsive" 
width="600" 
height="400"
indicator 
buttonController 
> 
<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> 

加副标题

"1000" 
layout="responsive" 
width="600" 
height="400"
indicator
    buttonController
    >
    <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">
        img 
src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" layout="responsive" 
width="600"
height="400">
        
        <div class="mip-carousle-subtitle">这里是title2
img
src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    
    img 
src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    

点击图片跳转

非 mip-carousel 直接子级元素的 mip-img 节点需要设置 width 和 height 属性

"1000"
layout="responsive" 
width="600" 
height="400">
    img 
src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

<a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">  
img 
src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" width="600" 400">
        
    
    img 
src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    

属性

width

说明:宽度,不是实际宽度,与高度属性配合来设置图片比例

必选项:是

类型:数字

单位:无

默认值:无

height

说明:高度,不是实际高度,与宽度属性配合来设置图片比例

必选项:是

类型:数字

单位:无

默认值:无

autoplay

说明:自动轮播开关

必选项:否

类型:字符串或空

取值:"",autoplay

单位:无

默认值:无

defer

说明:每次轮播的时间间隔,如果设置了autoplay,可以添加defer来指定轮播的时间间隔

必选项:否

类型:数字

单位:ms

默认值:2000

热门栏目