@charset?"utf-8";
/*?CSS?Document?*/
*{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,.slider,.main?.main-i{?width:100%;?height:400px;?position:relative;}
.slider?.main{?overflow:hidden;}
.slider?.main?.main-i{}
.slider?.main?.main-i?img{?width:100%;?position:absolute;?top:50%;?left:0;?z-index:1;}
.slider?.main?.main-i?.caption{?position:absolute;?right:50%;?top:30%;?z-index:9;}
.main-i?.caption?h2{?font-size:40px;?line-height:50px;?color:#B5B5B5;?text-align:right;}
.main-i?.caption?h3{font-size:70px;?line-height:70px;?color:#000000;?font-family:'Open?Sans?Condense';?text-align:right;}
/*控制按鈕區(qū)域*/
.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;}
?.slider?.ctrl?.ctrl-i:hover{?background-color:#f0f0f0;}
??.slider?.ctrl?.ctrl-i:hover?img{bottom:13px;opacity:1;?-webkit-box-reflect:below?0px??????-webkit-gradient(linear,left?top,left?bottom,from(transparent),
??color-stop(50%,transparent),to(rgba(255,255,255,.3)));?}
??.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;transition:all?1s?.8s;?}
?.slider?.main?.main-i_active{?opacity:1;right:0;}
?.main-i_active?h2,.main-i_active?h3{?margin-right:0px;?opacity:1;}
?.main?.main-i?.caption{?margin-right:13%;}
?腳本
?//?JavaScript?Document
var?data=[
???//1.數(shù)據(jù)定義,實(shí)際應(yīng)該后臺(tái)給出
??{img:1,h1:'Creative',h2:'DUET'},
??{img:2,h1:'Friendly',h2:'DEVIL'},
??{img:3,h1:'Tranquilent',h2:'COMPATRIOT'},
??{img:4,h1:'Insecure',h2:'HUSSLER'},
??{img:5,h1:'Loving',h2:'REBEL'},
??{img:6,h1:'Passionate',h2:'SEEKER'},
??{img:7,h1:'Crazy',h2:'FRIEND'}
];

//2.通用函數(shù)
??var?g?=function(id){
	??if(id.substr(0,1)=='.'){
		??return?document.getElementsByClassName(id.substr(1));
		??}
		??return?document.getElementById(id);
	??}??
//3.添加幻燈片的操作(所有幻燈片&對(duì)應(yīng)的按鈕)
function?addSliders(){
	//3-1獲取模板
	var?tpl_main=g('template_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
	var?tpl_ctrl=g('template_ctrl').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
	//3-2定義最終輸出HTML的變量
	var?out_main=[];
	var?out_ctrl=[];
	//3-3遍歷所有的數(shù)據(jù)，構(gòu)建最終輸出的HTML
	?for?(i?in?data?){
		?var?_html_main=tpl_main.replace(/{{index}}/g,data[i].img)
		?						?.replace(/{{h2}}/g,data[i].h1)
								?.replace(/{{h3}}/g,data[i].h2);
								?
		?var?_html_ctrl=tpl_ctrl.replace(/{{index}}/g,data[i].img);
		?out_main.push(_html_main);
	?????out_ctrl.push(_html_ctrl);
		?}
		//3-4把HTML回寫到對(duì)應(yīng)的DOM里面
		g('template_main').innerHTML=out_main.join('');
		g('template_ctrl').innerHTML=out_ctrl.join('');
?}
?//5?幻燈片切換
??function?switchSlider(n){
	??//5-1獲得要展現(xiàn)的幻燈片&控制按鈕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('?ctrl-i_active','');
		??}
	??//5-4為當(dāng)前控制按鈕和幻燈片附加樣式
	??
	??main.className?+=?'?main-i_active';
	??ctrl.className?+=?'?ctrl-i_active';
	??}
	??//6動(dòng)態(tài)調(diào)整圖片的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.定義何時(shí)處理幻燈片輸出
	?window.onload=function(){
		?addSliders();
		?switchSlider(1);
		?setTimeout(function(){
			?movePictures();
			?},100)
		?}