/*幻灯片切换的样式*/
.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{
-webkit-transition: all .8s;
}
.slider .main .main-i_active{
right:0;
opacity: 1;
}
.slider .main .main-i_active h2,
.slider .main .main-i_active h3{
margin-right:0px;
}
2015-08-18
<script type="text/javascript">
/*1.定义数据*/
var data = [
{img:1,h2:'Caption',h3:'COMPATAIOT'},
{img:2,h2:'Fridently',h3:'Duct'},
{img:3,h2:'Caption',h3:'REBEL'},
{img:4,h2:'Loving',h3:'Duct'},
{img:5,h2:'Crazy',h3:'SEEKER'},
{img:6,h2:'Caption',h3:'Duct'},
{img:7,h2:'Shopping',h3:'FRIEND'},
];
/*2g通用函数--获取DOM*/
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].h2)
.replace(/{{h3}}/g,data[i].h3)
.replace(/{{css}}/g,['','main-i_right'][i%2]); //随机的添加main-i_right样式
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('');
//7增加#main_background
g('template_main').innerHTML += tpl_main
.replace(/{{index}}/g,'{{index}}')
.replace(/{{h2}}/g,data[i].h2)
.replace(/{{h3}}/g,data[i].h3);
g('main_{{index}}').id = 'main_background';
}
//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';
//7.2切换时，复制上一张幻灯片到main_background 中
setTimeout(function(){
g('main_background').innerHTML = main.innerHTML;
},1000)
}
//6 动态调整图片的 margin-top 以使其2垂直居中
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>
*{ 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{ overflow: hidden; }
.slider, .slider .main, .slider .main .main-i{ width:100%; height:400px; position:relative; }
.slider .main .main-i img{ width:100%; position: absolute； top:70%; left:0; 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: center; }
.slider .main .main-i .caption .h3{ font-size:70px; line-height:70px; color:#000; text-align: right;
font-family: "times new roman"; }
/*控制区域*/
.slider .ctrl{
width:100%;
height:13px;
line-height: 13px;
text-align: center;
position: absolute;
left: 0;
bottom:-13px;
background-color: #fff;
}
.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;
z-index: 2;
}
.slider .ctrl .ctrl-i:hover img{
bottom:13px;
-webkit-box-reflect: below 0px -webkit-gradient(
linear,
left top,
right 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;
z-index: 2;
}
.slider .main .main-i_right{
right:-50%;
}
.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;
}
#main_background,
.slider .main .main-i_active{
right:0;
opacity: 1;
z-index: 2;
}
#main_background{
z-index:1;
}
.slider .main .main-i_active h2,
.slider .main .main-i_active h3{
margin-right:0px;
opacity: 1;
}
.slider .main .main-i .caption{
margin-right: 13%;
}
举报
