<!doctype html><html><head><meta charset="utf-8"><title>幻灯片</title><style type="text/css">*{ padding:0; margin:0;}body{ padding:50px 0; background-color:#FFF; font-size:14px; color:#555;}.slider .main .main_i,.slider .main,.slider{ width:100%; height:400px; position:relative;}/*幻灯片区域*/.slider .main{ overflow:hidden; }/*每个幻灯片*/.slider .main .main_i{}.slider .main .main_i img{ width:100%; position:absolute; left:0; top: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:right;}.slider .main .main_i .caption h3{ font-size:70px; line-height:70px; color:#000; 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:#000000;}.slider .ctrl .ctrl_i_active:hover img{ opacity:0;}/*幻灯片切换样式*/.slider .main .main_i{ position:absolute; right:50%; top:0; opacity:0; -webkit-transition:all .5s;}.slider .main .main_i h2{ margin-right:45px;}.slider .main .main_i h3{ margin-right:-60px;}.slider .main .main_i_active h2,.slider .main .main_i_active h3{ -webkit-transition:all .8s 1s;}.slider .main .main_i_active{ opacity:1; right:0;}.slider .main .main_i_active h2,.slider .main .main_i_active h3{ margin-right:-45px;}</style></head><body><div class="slider"> <div class="main" id="template_main"> <div class="main_i{{css}} " id="main_{{index}}"> <div class="caption"> <h2>{{h2}}</h2> <h3>{{h3}}</h3> </div> <img src="images/{{index}}.jpg"/> </div> </div> <div class="ctrl" id="template_ctrl"> <a class="ctrl_i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});"><img src="images/{{index}}.jpg" /></a> </div></div><script type="text/javascript"> //数据定义（实际有后台给出） var data = [ {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'}, ]; //通用函数 var g = function (id){ if(id.substr(0,1)=='.'){ return document.getElementsByClassName(id.substr(1)); } return document.getElementById(id); } //添加幻灯片 function addSliders(){ //获取模板 var tpl_main = g('template_main').innerHTML .replace(/^\s*/,'') .replace(/^\s*$/,''); var tpl_ctrl= g('template_ctrl').innerHTML .replace(/^\s*/,'') .replace(/^\s*$/,''); //定义最终输出的 HTML 变量 var out_main =[]; var out_ctrl =[]; //构建最终输出的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); } //回写html到DOM里面 g('template_main').innerHTML = out_main.join(''); g('template_ctrl').innerHTML = out_ctrl.join(''); } //幻灯片切换 function switchSlider(n){ //获取要展现的幻灯片&控制按钮 DOM var main = g('main_'+n); var ctrl = g('ctrl_'+n); //获得样式 var clear_main = g('.main_i'); var clear_ctrl = g('.ctrl_i'); //清楚样式 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',''); } main.className +='main_i_active'; ctrl.className +='ctrl_i_active'; } //处理幻灯片输出时间 window.onload = function(){ addSliders(); switchSlider(1); }</script></body></html>
添加回答
举报
0/150
提交
取消