<!DOCTYPE?html><html?lang="zh-CN"><head>????<meta?charset="UTF-8">????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">????<title>Document</title>????<style>????????*?{????????????padding:?0;????????????margin:?0;????????}????????body?{????????????padding:?50px?0;????????????background-color:?#FFF;????????????font-size:?14px;????????????font-family:?'Avenir?Next';????????????color:?#555;????????????/*字體抗鋸齒*/????????????-webkit-font-smoothing:?antialiased;????????}????????.slider?.main?.main-i,????????.slider?.ctrl,????????.slider?.main,????????.slider?{????????????width:?100%;????????????height:?400px;????????????position:?relative;????????}????????/*?幻燈片區域樣式?*/????????.slider?.main?{????????????overflow:?hidden;????????}????????.slider?.main?.main-i?img?{????????????width:?100%;????????????position:?absolute;????????????left:?0;????????????top:?50%;????????????z-index:?1;????????}????????.slider?.main?.main-i?.caption?{????????????position:?absolute;????????????right:?50%;????????????top:?30%;????????????z-index:?9;????????}????????.slider?.main?.main-i?.caption?h2?{????????????font-size:?40px;????????????line-height:?50px;????????????color:?#B5B5B5;????????????text-align:?right;????????}????????.slider?.main?.main-i?.caption?h3?{????????????font-size:?70px;????????????line-height:?70px;????????????color:?#000000;????????????text-align:?right;????????????font-family:?'Open?Sans?Condensed';????????}????????/*?控制按鈕區域樣式?*/????????.slider?.ctrl?{????????????width:?100%;????????????height:?13px;????????????line-height:?13px;????????????text-align:?center;????????????position:?absolute;????????????left:?0;????????????bottom:?-13px;????????}????????.slider?.ctrl?.ctrl-i?{????????????display:?inline-block;????????????width:?150px;????????????height:?13px;????????????background-color:?#666;????????????box-shadow:?0?1px?1px?rgba(0,?0,?0,?.3);????????????position:?relative;????????????margin-left:?1px;????????}????????.slider?.ctrl?.ctrl-i?img?{????????????width:?100%;????????????position:?absolute;????????????left:?0;????????????bottom:?50px;????????????z-index:?1;????????????opacity:?0;????????????/*?動畫?*/????????????-webkit-transition:?all?.2s;????????}????????/*?hover?到控制按鈕的樣式?*/????????.slider?.ctrl?.ctrl-i:hover?{????????????background-color:?#f0f0f0;????????}????????.slider?.ctrl?.ctrl-i:hover?img?{????????????bottom:?13px;????????????/*?倒影效果?*/????????????-webkit-box-reflect:?below?0px?-webkit-gradient(linear,????????????????????left?top,????????????????????left?bottom,????????????????????from(transparent),????????????????????color-stop(50%,?transparent),????????????????????to(rgba(255,?255,?255,?.3)));????????????opacity:?1;????????}????????/*?active?當前展現的狀態?*/????????.slider?.ctrl?.ctrl-i_active:hover,????????.slider?.ctrl?.ctrl-i_active?{????????????background-color:?#000;????????}????????.slider?.ctrl?.ctrl-i_active:hover?img?{????????????opacity:?0;????????}????????/*?幻燈片切換的樣式?*/????????.slider?.main?.main-i?{????????????opacity:?0;????????????position:?absolute;????????????right:?50%;????????????top:?0;????????????-webkit-transition:?all?.5s;????????}????????.slider?.main?.main-i?h2?{????????????margin-right:?45px;????????}????????.slider?.main?.main-i?h3?{????????????margin-right:?-45px;????????}????????.slider?.main?.main-i?h2,????????.slider?.main?.main-i?h3?{????????????opacity:?0;????????????-webkit-transition:?all?1s?.8s;????????}????????.slider?.main?.main-i_active?{????????????opacity:?1;????????????right:?0;????????}????????.slider?.main?.main-i_active?h2,????????.slider?.main?.main-i_active?h3?{????????????margin-right:?0;????????????opacity:?1;????????}????????.slider?.main?.main-i?.caption?{????????????margin-right:?13%;????????}????</style></head><body>????<div?class="slider">????????<!--?0.修改?VIEW->Template(關鍵字替換)?-->????????<div?class="main"?id="template_main">????????????<div?class="main-i"?id="main_{{index}}">????????????????<div?class="caption">????????????????????<h2>{{h2}}</h2>????????????????????<h3>{{h3}}</h3>????????????????</div>????????????????<img?src="image/{{index}}.jpg"?class="picture"?/>????????????</div>????????</div>????????<div?class="ctrl"?id="template_ctrl">????????????<a?class="ctrl-i"?id="ctrl_{{index}}"?href="javascript:switchSlider({{index}});">????????????????<img?src="image/{{index}}.jpg"?/>????????????</a>????????</div>????</div></body><script>????//?1.數據定義????var?data?=?[{????????????img:?'1',????????????h2:?'Creative',????????????h3:?'DUET'????????},????????{????????????img:?2,????????????h2:?'Friendly',????????????h3:?'DEVIL'????????},????????{????????????img:?3,????????????h2:?'Tranquilent',????????????h3:?'COMPATRIOT'????????},????????{????????????img:?4,????????????h2:?'Insecure',????????????h3:?'HUSSLER'????????},????????{????????????img:?5,????????????h2:?'Loving',????????????h3:?'REBEL'????????},????????{????????????img:?6,????????????h2:?'Passionate',????????????h3:?'SEEKER'????????},????????{????????????img:?7,????????????h2:?'Crazy',????????????h3:?'FRIEND'????????}????];????//?2.通用函數????var?g?=?function?(id)?{????????if?(id.substr(0,?1)?==?'.')?{????????????return?document.getElementsByClassName(id.substr(1));????????}????????return?document.getElementById(id);????}????//?3.添加幻燈片的操作（所有幻燈片&對應的按鈕）????function?addSliders()?{????????//?3.1獲取模板????????//?3.1.1清除開始和結尾空白字符?--幻燈片????????var?tpl_main?=?g('template_main').innerHTML????????????.replace(/^\s*/,?'')????????????.replace(/\s*$/,?'');????????//?3.1.2清除開始和結尾空白字符?--幻燈片控制按鈕????????var?tpl_ctrl?=?g('template_ctrl').innerHTML????????????.replace(/^\s*/,?'')????????????.replace(/\s*$/,?'');????????//?3.2定義最終輸出的HTML的變量????????var?out_main?=?[];????????var?out_ctrl?=?[];????????//?3.3遍歷所有數據，構建最終輸出的HTML????????//?3.3.1把幻燈片中的img,h2,h3替換成{{index}},{{h2}},{{h3}}中的內容????????for?(i?in?data)?{????????????var?_html_main?=?tpl_main????????????????.replace(/{{index}}/g,?data[i].img)????????????????.replace(/{{h2}}/g,?data[i].h2)????????????????.replace(/{{h3}}/g,?data[i].h3);????????????//?3.3.2把幻燈片控制按鈕中的img替換成{{index}}中的內容????????????var?_html_ctrl?=?tpl_ctrl????????????????.replace(/{{index}}/g,?data[i].img);????????????out_main.push(_html_main);????????????out_ctrl.push(_html_ctrl);????????}????????//?3.4?把HTML回寫到對應的DOM里面????????g('template_main').innerHTML?=?out_main.join('');????????g('template_ctrl').innerHTML?=?out_ctrl.join('');????}????//?5.幻燈片切換????function?switchSlider(n)?{????????//?5.1獲得要展現的幻燈片&控制按鈕DOM????????var?main?=?g('main_'?+?n);????????var?ctrl?=?g('ctrl_'?+?n);????????//?5.2獲得所有的幻燈片以及控制按鈕????????var?clear_main?=?g('.main-i');????????var?clear_ctrl?=?g('.ctrl-i');????????//?5.3清除他們的active樣式????????for?(i?=?0;?i?<?clear_ctrl.length;?i++)?{????????????clear_main[i].className?=?clear_main[i].className????????????????.replace('main-i_active',?'');????????????clear_ctrl[i].className?=?clear_ctrl[i].className????????????????.replace('main-i_active',?'');????????}????????//?5.4為當前控制按鈕和幻燈片附加樣式????????main.className?+=?'main-i_active';????????ctrl.className?+=?'ctrl-i_active';????}????//?6.?動態調整圖片的margin-top以使其垂直居中????function?movePictures()?{????????var?pictures?=?g('.picture');????????for?(i?=?0;?i?<?pictures.length;?i++)?{????????????pictures[i].style.marginTop?=?(-1?*?pictures[i].clientHeight?/?2)?+?'px'????????}????}????//?4.定義何時處理幻燈片輸出????window.onload?=?function?()?{????????addSliders();????????switchSlider(2);????????setTimeout(function?()?{????????????movePictures();????????},?100)????}</script></html>
