## 一. 組件詳解 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.更換輪播特效