原生js+css实现带预览图片的幻灯片效果实例

先总结一下，里面的用到的关键知识点

CSS中用到的知识点有：

过渡效果：transition，下面是语法，用到时候一般要加上浏览器内核前缀。本实例中主要用到过渡的地方是opacity和right

transition: property duration timing-function delay;

图片垂直居中：（这个我之前详细写过怎么实现水平垂直居中，原理一样，如果有兴趣的可以点击https://blog.csdn.net/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方法）），作用是输出幻灯片和控制按钮

嗯、上面是用到的核心技术，但理论和实践还差十个阮一峰，具体的实现，请看下面的实现过程

    
    
    



    

        

        

            
{{h2}}
            
{{h3}}