## 一. 组件详解
1. 轮播组件的定义：能够轮播一系列的页面。
2. 轮播组件示例如下图所示：
* * * * *
## 二.功能描述
1. 能够直观的表达网站的主题。
2. 美化页面。
* * * * *
## 三.代码规范
* 1.使用**bootstrap开发轮播图**（请搜索boostrap轮播)
* 2.在开发完成的轮播图组件添加data-type="solideBanner"属性指明这是一个嗨创轮播图。
* 3.嗨创提供了3种轮播特效**【e-default为默认特效 ，同时 还有 disapear（逐渐消失），expand-disapear（变大消失），.hand-organ （手拉风情）】** ，想用哪一种特效在轮播图中添加banner-effect="name"（name为特效的英文名称） 属性，并且添加class=“name“（name为特效的英文名称）。
* 4.在该组件上边边需要引入`<link rel="stylesheet" type="text/css" href="/diy/asyn.file/jsb/module/css/bannerEffect.css">`样式。
* 5.其中文字部分应遵循**文字规范**（文字部分需添加data-effect="edit"属性），图片部分应遵循**图片规范**（**不添加data-type属性**，onerror属性）。
* 6.规范图解：
* 7.图解代码：
~~~
<div id="myCarousel" data-type="solideBanner" banner-effect="e-default" class="carousel slide e-default" data-ride="carousel" data-interval="2000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">
<li data-target="#myCarousel" data-slide-to="1" class="">
<li data-target="#myCarousel" data-slide-to="2" class="">
</ol>
<div class="carousel-inner" role="listbox" style="z-index: 1;">
<div class="item active">
其他代码
</div>
<div class="item ">
其他代码
</div>
<div class="item ">
其他代码
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"></a>
</div>
~~~
* * * * *
## 四.代码示例
#### 应用场景一：
~~~
<div style="position: relative;" class="h5c_evYgVCASmtzio">
<link rel="stylesheet" type="text/css" href="/diy/asyn.file/jsb/module/css/bannerEffect.css">
<style>
/*htmlb代码*/
.h5c_evYgVCASmtzio .carousel-caption{
text-shadow: none;
top:0% !important;
bottom:0% !important;
left:0% !important;
right:0% !important;
}
.h5c_evYgVCASmtzio .carousel-caption-box,.h5c_evYgVCASmtzio .carousel-caption-box2,.h5c_evYgVCASmtzio .carousel-caption-box3{
padding: 13px 27px 13px 27px;
}
.h5c_evYgVCASmtzio .carousel-indicators li{width: 85px;height:3px;border-radius: 0px;background-color: rgba(128,128,128,0.2);border: none;margin: 0;}
.h5c_evYgVCASmtzio .carousel-indicators .active{width: 85px;height:3px;background-color: rgba(128,128,128,0.8);}
.h5c_evYgVCASmtzio .slide>p{color: #9d9d9d;font-size: 20px;font-family: '微软雅黑', Verdana, Arial, Helvetica, sans-serif;text-align:center;margin-top: 10px;}
.h5c_evYgVCASmtzio .carousel-caption-box h1{color: #000;font-size:3vh;font-weight: bolder;}
.h5c_evYgVCASmtzio .carousel-caption-box h3{color: #000;font-size:4vh;font-family: 'HanHei SC', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif;}
.h5c_evYgVCASmtzio .carousel-caption-box2 h1{color: #000;overflow: hidden;margin-bottom: 0px;}
.h5c_evYgVCASmtzio .carousel-caption-box2 h1>img{display: inline-block;}
.h5c_evYgVCASmtzio .carousel-caption-box2 h1>span{display: inline-block;font-weight: 600;margin-left: 2px;}
.h5c_evYgVCASmtzio .carousel-caption{overflow: hidden;text-align: center;}
.h5c_evYgVCASmtzio .carousel-caption-box2{display: inline-block;}
.h5c_evYgVCASmtzio .carousel-caption-box2 h3{font-weight:600;letter-spacing:1px;color: #000;font-size: 14px;margin-top: 5px;font-family:"HanHei SC","PingHei","PingFang SC","STHeitiSC-Light","Helvetica Neue","Helvetica","Arial",sans-serif;}
.h5c_evYgVCASmtzio .carousel-caption p{color:#000;font-size:3vh;position: absolute;bottom:10%;left: 44%;}
.h5c_evYgVCASmtzio .carousel-caption-box3 h1{font-size: 3vh;}
.h5c_evYgVCASmtzio .carousel-control.left, .carousel-control.right {
background-image:none;background-color: rgba(180,180,180,0.4);
}
.h5c_evYgVCASmtzio .carousel-control {
background-image: none;
border-radius: 50%;
width: 74px;
height: 74px;
position: absolute;
top: 50%;
z-index: 2;
}
svg:not(:root), .wqdelementEdit .carousel-control_6 svg:not(:root) {
position: static;
margin-top: 0;
width: 15px;
height: 100%;
}
</style>
/**************************以下是轮播图组件*****************************************/
<div id="myCarousel" data-type="solideBanner" banner-effect="e-default" class="carousel slide e-default" data-ride="carousel" data-interval="2000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">
<li data-target="#myCarousel" data-slide-to="1" class="">
<li data-target="#myCarousel" data-slide-to="2" class="">
</ol>
<div class="carousel-inner" role="listbox" style="z-index: 1;">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" class="img-responsive" alt="900x500" src="/diy/asyn.file/jsb/module/solideBanner/solideBanner-1/img/banner_index2.jpg" onerror="javascript:this.src='/diy/asyn.file/jsb/module/solideBanner/solideBanner-1/img/banner_index2.jpg'" data-holder-rendered="true"><div class="carousel-caption">
<div class="carousel-caption-box hidden-xs">
<h1 data-effect="edit" class="text-center">MacBook Pro</h1>
<h3 data-effect="edit">一身才华，一触，即发。</h3>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="item ">
<img data-src="holder.js/900x500/auto/#666:#666" class="img-responsive" alt="900x500" src="/diy/asyn.file/jsb/module/solideBanner/solideBanner-1/img/banner_index1.jpg" onerror="javascript:this.src='/diy/asyn.file/jsb/module/solideBanner/solideBanner-1/img/banner_index1.jpg'" data-holder-rendered="true"><div class="carousel-caption">
<div class="carousel-caption-box2 hidden-xs">
<h1 data-effect="edit" class="text-center ">
<img src="/diy/asyn.file/jsb/module/solideBanner/solideBanner-1/img/17.png" class="pull-left" alt=""><span data-effect="edit" class="pull-right">WHTCH</span>
</h1>
<h3 data-effect="edit">ERIES 2</h3>
</div>
<p data-effect="edit">Series 2 新登场。</p>
<div class="clearfix"></div>
</div>
</div>
<div class="item ">
<img data-src="holder.js/900x500/auto/#666:#666" class="img-responsive" alt="900x500" src="/diy/asyn.file/jsb/module/solideBanner/solideBanner-1/img/banner_index3.jpg" onerror="javascript:this.src='/diy/asyn.file/jsb/module/solideBanner/solideBanner-1/img/banner_index3.jpg'" data-holder-rendered="true"><div class="carousel-caption">
<div class="carousel-caption-box3 hidden-xs">
<h1 data-effect="edit" class="text-center ">iPhone<br> 7,在此。</h1>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<svg xmlns="http://www.w3.org/2000/svg" id="_x31_" enable-background="new 0 0 28 87" viewbox="0 0 28 87" x="0px" y="0px" version="1.1" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon clip-rule="evenodd" fill="#fff" fill-rule="evenodd" points="2.6,43.3 27.6,1.6 25.9,0.5 0.3,43.3 0.3,43.3 0.3,43.3 0.3,43.3 0.3,43.3 26,86.5 27.7,85.4"></polygon></svg></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<svg xmlns="http://www.w3.org/2000/svg" id="_x31_" enable-background="new 0 0 28 87" viewbox="0 0 28 87" x="0px" y="0px" version="1.1" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon clip-rule="evenodd" fill="#fff" fill-rule="evenodd" points="25.4,43.7 0.4,85.4 2.1,86.5 27.7,43.7 27.7,43.7 27.7,43.7 27.7,43.7 27.7,43.7 2,0.5 0.3,1.6"></polygon></svg></a>
</div>
/******************************以上是轮播图组件*****************************************/
</div>
~~~
* 效果：
* * * * *
## 五.补充说明
按照规范开发的组件，嗨创将会为其提供以下功能
1.添加新页面
2.删除新页面
3.编辑轮播图文字
4.编辑轮播图图片
5.更换轮播特效
