@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;}
/*控制按钮区域*/
.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.数据定义,实际应该后台给出
  {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.通用函数
  var g =function(id){
	  if(id.substr(0,1)=='.'){
		  return document.getElementsByClassName(id.substr(1));
		  }
		  return document.getElementById(id);
	  }  
//3.添加幻灯片的操作(所有幻灯片&对应的按钮)
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遍历所有的数据，构建最终输出的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回写到对应的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(' ctrl-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(1);
		 setTimeout(function(){
			 movePictures();
			 },100)
		 }