下面是在Chrome下显示的结果：代码如下：<!DOCTYPE html><html><head> <title>Preview Slideshow</title> <meta charset="utf-8"> <style type="text/css"> *{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, .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; 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: #000000; text-align: right; 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,0.3); position: relative; margin-left: 1px; } .slider .ctrl .ctrl-i img{ width: 100%; position: absolute; bottom: 50px; left: 0; z-index: 1; opacity: 0; -webkit-transition:all 0.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, .slider .ctrl .ctrl-i_active:hover{ 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{ -webkit-transition:all .8s 1s; } .slider .main .main-i_active{ right: 0; opacity: 1; } .slider .main .main-i_active h2, .slider .main .main-i_active h3{ margin-right: 0px; } </style></head><body><div class="slider"> <!--0. 修改VIEW——>Template（关键字替换），增加template id--> <div class="main" id="template_main"> <div class="main-i" 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 href="javascript:switchSlider({{index}});" class="ctrl-i" id="ctrl_{{index}}"><img src="images/{{index}}.jpg"/></a> </div> </div> <script type="text/javascript"> //1.数据定义（实际生产环境中，由后台给出） 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'}]; //2.通用函数 var g = function(id){ if(id.substr(0,1)=='.'){ return document.getElementsByClassName(id.substr(1)); } return document.getElementById(id); } //3.添加幻灯片操作（所有幻灯片对应的按钮） function addSlider(){ //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(var 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'; } //4 定义何时处理幻灯片输出 window.onload = function(){ addSlider(); switchSlider(1); } </script></body></html>
添加回答
举报
0/150
提交
取消