mip-carousel 多图轮播

mip-carousel 用来支持 mip 中图片的一种展示方式，支出多图轮播，下面将为大家详细介绍怎么实现。

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

加副标题

<mip-carousel
    autoplay
    defer="1000" 

layout="responsive" 

width="600" 

height="400"

indicator
    buttonController
    >
    <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">
        <mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" layout="responsive" 

width="600"

height="400">

        </mip-img>
        <div class="mip-carousle-subtitle">这里是title2</div>
    </a>
    <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 直接子级元素的 mip-img 节点需要设置 width 和 height 属性

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

<a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">  

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" width="600" height="400">
        </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组件支持的各种布局，可以让图片屏幕自适应、定高等。让我们看看下面的详细说明。

支持的布局种类

类别	强制 width	强制 height	详细说明
responsive	是	是	能够根据width、height的值，算出元素对应的比例，在不同屏幕宽度上做自适应，非常适合图片、视频等需要大小自适应的组件
fixed-height	否	是	元素的高度固定,width缺省或者取值为auto，比较适合 mip-carousel
fill	否	否	元素的大小根据父节点的大小自动撑开
container	否	否	元素的大小由他们的子节点大小决定,类似 html 的 div
nodisplay	否	否	元素不展现，即 display 为 none；这种元素可应用于：他自身展现依赖用户的点击等行为的触发
fixed	是	是	元素根据 width 和 height 固定高宽，不随 media 变化

使用

MIP 元素添加属性 layout，取值参照上面的种类

<mip-img

layout="responsive"

width="350"

height="263"

popup=""

alt="baidu mip img"

src="http://www.111cn.net//get_pic/upload/image/20161216231233.jpg">

layout 属性缺省规则

width	height	其他属性	默认布局
有	有	无	fixed
有	有	存在sizes 参数	responsive
无或取值为 auto	有	无	fixed-height
无	无	无	container

layout 默认值

所有MIP元素都会有layout。由于移动端的设计大部分是块状的，所以默认的layout是container，类似于div。如果有其它的样式需求，如inline、inline-block。可通过样式覆盖的方式修改元素display等

MIP组件有哪些？MIP组件有三种：内置组件、个性化组件以及广告组件，不同的组件有着不同的作用，下面请看详细的介绍。

1、内置组件

图片组件（mip-img）

视频组件（mip-video）

mip-pix 组件（mip-pix）

轮播组件（mip-carousel）

iframe 组件（mip-iframe）

2、个性化组件

折叠节点组件（mip-according）

动图组件（mip-anim）

app下载组件（mip-appdl）

音频组件（mip-audio）

百度统计组件（mip-stats-baidu）

筛选组件（mip-filter）

悬浮组件（mip-fixed）

表单组件（mip-form）

系统区分组件（mip-html-os）

页面跳转组件（mip-link）

菜单组件（mip-nav-slidedown）

分享组件（mip-share）

侧边栏组件（mip-sidebar）

天润统计组件（mip-stats-tianrun）

3、广告组件

广告组件（mip-ad）

如需其他组件，如广告组件和统计组件，可以参考组件开发规范开发并提交给我们。

在某些情况下，站点对于同一个html页面，可能存在两种，一个是mip页，一个是原页面。百度会抓取这两个页面，并利用canonical标签将它们联系起来。

关联标签

你必须在MIP添加<link rel="canonical">指向原始页面，以保证MIP更好的继承原始页面的权重。

同时，你可以在原始页面中添加<link rel="miphtml">指向MIP，以使得搜索引擎更好的发现你创建的MIP。

使用规则：

• 在MIP页中使用<link rel="canonical”>，指向原页面(m站)，也可以指向原始网页中<link rel="canonical">所指向的pc页。
• 若MIP页没有对应的原页面，则指向MIP页本身url。
• 在原页面(m站)使用<link rel="miphtml">，用来指向MIP页。

在head中添加link标签让百度搜索发现你的页面

两种页面同时存在

在非 MIP 页中添加：

<linkrel="miphtml"href="https://m.baidu.com/mip/demo.html">

在 MIP 页中添加：

<linkrel="canonical"href="https://m.baidu.com/demo.html">

如果只有 MIP 页

同样需要添加，指向自己：

<linkrel="canonical"href="https://m.baidu.com/mip/demo.html">

新建MIP页的文件path建议

原网页与mip页的url的对应关系尽量简单、直接。

原网页出现的文档名或文档id，在MIP页命名时也要出现。