@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)
}
