先总结一下，里面的用到的关键知识点
CSS中用到的知识点有：
过渡效果：transition，下面是语法，用到时候一般要加上浏览器内核前缀。本实例中主要用到过渡的地方是opacity和right
transition: property duration timing-function delay;
图片垂直居中：（这个我之前详细写过怎么实现水平垂直居中，原理一样，如果有兴趣的可以点击/lhjuejiang/article/details/79756844），这里主要用到的是：position:absolute; top:50%; margin-top:-(图片高度的一半)+px’;
盒子倒影效果：(这个目前只有内核前缀是-webkit的浏览器实现了)-webkit-box-reflect+: 方向(必选，可能的值有：above、below、left、right) 距离（可选） 渐变（可选）
js中用到的核心技术有：正则表达式、字符串中的replace方法（注意replace方法输出的为字符串，而replace是字符串默认拥有的方法，所以replace可以连续使用）
用到了setTimeout定时器：主要解决的问题是：我们的元素是动态插入的，所以我们需要等到元素插入完成之后再对其进行后续的操作
模板字符串：嗯，这个也是我刚学会的，之前也没用过，我的理解就是把之前做好的一个模板进行改造（主要就是关键字的替换，一般把是如右边的做法：{{关键字}}，输出的时候用我们接受的数据替换掉关键字（用到了正则和字符串中的replace方法）），作用是输出幻灯片和控制按钮
嗯、上面是用到的核心技术，但理论和实践还差十个阮一峰，具体的实现，请看下面的实现过程
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{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 img{width:100%;position:absolute; left:0; top:50%; z-index:1;}.slider .main .main-i_right img{margin-right:-50%;}.slider .main .main-i .caption{position:absolute; right:50%; top:30%; z-index:9;}.slider .main .main-i .caption h2{font-size:26px; line-height:50px;color:#b5b5b5; text-align:right;}.slider .main .main-i .caption h3{font-size:40px; line-height:70px;color:#000; text-align:right; ;}/*控制按钮区域*/.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:12%; height:13px; background-color:#666; position:relative; box-shadow:0 1px 1px rgba(0,0,0,.3); margin-left:1px;}.slider .ctrl .ctrl-i img{width:100%; position:absolute; left:0; bottom:50px; opacity:0; transition:all .2s;z-index:1;}/*hover 的控制按钮的样式*/.slider .ctrl .ctrl-i:hover{background-color:#f0f0f0;}.slider .ctrl .ctrl-i:hover img{opacity:1;bottom:13px;z-index:2;-webkit-box-reflect:below 0px -webkit-gradient(linear,left top,left bottom, from(transparent),color-stop(50% transparent),to(rgba(255,255,255,0.3)));}/*active当前展现的样式*/.slider .ctrl .ctrl-i_active,.slider .ctrl .ctrl-i_active:hover{background-color:#000;}.slider .ctrl .ctrl-i_active:hover img{opacity:0;z-index:10;}/*幻灯片切换的样式*/.slider .main .main-i{opacity:0;position:absolute;right:50%;top:0;-webkit-transition:all .5s;z-index:2;}#main_background,.slider .main .main-i_active{opacity:1;right:0;}#main_background{z-index:1;}.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 1s .8s; opacity:0;}.slider .main .main-i_active h2,.slider .main .main-i_active h3{margin-right:0; opacity:1;}.slider .main .main-i .caption{margin-right:13%;}</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="imgs/{{index}}.jpg" class="picture"/></div></div><div class="ctrl" id="template_ctrl"><a class="ctrl-i " id="ctrl_{{index}}" href="javascript:switchSlider({{index}});"><img src="imgs/{{index}}.jpg"/></a></div></div><script>//数据定义，实际生产中应由后台给出var data = [{img:1,h1:'Beautiful Lacy&Jan',h2:'Cute Girls'},{img:2,h1:'Annnanann',h2:'Dadada'},{img:3,h1:'Beautiful Ann',h2:'Cute Girl'},{img:4,h1:'Beautiful Donna',h2:'Cute Girl'},{img:5,h1:'Beautiful Lucy',h2:'Cute Girl'},{img:6,h1:'Beautiful Joy',h2:'Cute Girl'},{img:7,h1:'Beautiful Ken',h2:'Good boy'}];//内容输出//0 修改VIEW，转为Template（关键字替换，增加template id）//通用函数var g = function(id){if(id.substr(0,1)=='.'){return document.getElementsByClassName(id.substr(1));}return document.getElementById(id);}//3、添加幻灯片的操作（所有幻灯片对应的按钮）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 = [];//遍历所有数据，构建最终输出的HTMLfor(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).replace(/{{css}}/g,['','main-i_right'][i%2]);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('');//添加切换时的背景图片g('template_main').innerHTML +=tpl_main.replace(/{{index}}/g,'{{index}}').replace(/{{h2}}/g,data[i].h1).replace(/{{h3}}/g,data[i].h2);g('main_{{index}}').id = 'main_background';}//幻灯片切换function switchSlider(n){//获得要展示的幻灯片按钮 DOMvar main = g('main_'+n);var ctrl = g('ctrl_'+n);//获得所有幻灯片以及控制按钮var clear_main = g('.main-i');var clear_ctrl = g('.ctrl-i');//清除他们的active样式for(var i=0; i<clear_ctrl.length;i++){//这个地方使用的是clear_ctrl.length,我试过使用clear_main.length,然后后面的clear_ctrl[i].className就一直报错，不知道为什么，反正注意就用celar_ctrl.length,不会报错，等我搞懂了，会进行讨论的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';//切换时复制上一张幻灯片到main_background中setTimeout(()=>{g('main_background').innerHTML = main.innerHTML;},1000)}function movePictures(){var pictures = g('.picture');for(var i=0; i<pictures.length;i++){pictures[i].style.marginTop = (-1*pictures[i].clientHeight)/2+'px';}}window.onload = function(){addSliders();switchSlider(1);setTimeout(function(){movePictures();},100);}</script></body></html>
