网页组件制作之带预览图幻灯片效果

在该笔记中将学到列表展示中带预览图幻灯片效果的方法与展示效果

本系列的是参考慕课网 lyn老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

适用场景：

单列布局，通过大图突出商品
适合单列布局，不适合左右分栏

VCD 分析法

V(view)：视觉，通过 V 的部分分析页面的 html 结构
D(data)：数据，页面发生变化的时候需要提供的数据是什么
C(controller)：控制，指的是页面部分所有的动作和行为

基本的素材是 view 和 data，controller 部分是脚本流程和功能。

view 部分的开发

通过对项目的视觉分析，列出网页的 html 页面结构图。

data的部分是页面发生变化的时候需要提供的数据，一般是通过 AJAX 从服务器端获取，在本案例中通过 JS 创建了一个数组用来存储数据。

显示效果如下：

相关的技术点：

transition：设置元素 CSS 改变的过度动画
-webkit-box-reflec：设置元素支持倒影
在模版关键字中，使用 replace 替换关键字，例如
在 a 标签的 href 属性中设置的值是 javascript:switchSlider(1)，用来调用 js 中定义好的函数
在 HTML 中没有将所有的元素都写出来，而是只写了一个模版 div ，其中需要替换的值用等值标出。在 addSlider 函数中，使用 JS replace 函数来替换模版中需要替换的数据(data)，创建多个相同模版产生的 div，用 innerHTML 来更新 HTML 内容。

在本教程中，要注意模版的使用方法。

<html>
    <head>
        <title>预览图幻灯片效果</title>
        <meta charset="utf-8">
        <style type="text/css">
            *{margin: 0;padding: 0;}
            body{padding: 50px 0;background-color: #FFF;font-size: 14px;font-family: "Avenir Next";color: #555;}
            .slider, .slider .main, .slider .main .main-i{ width: 800px; height: 450px;position: relative;margin: 0 auto;}
            .slider .main{ overflow: hidden;}
            .slider .main .main-i{z-index: 1}
            .slider .main .main-i img{ position: absolute;z-index: 1;width: 100%;}
            .slider .main .main-i .caption{position: absolute;left: 50%;top: 30%; z-index: 2;}
            .slider .main .main-i .caption h2{font-size: 30px;line-height: 50px;color: #B5B5B5;text-align: right;opacity: 0;}
            .slider .main .main-i .caption h3{font-size: 50px;line-height: 70px;color: #000;text-align: right;font-family: "Open Sans Condensed";opacity: 1;}
            .slider .ctrl{width: 100%; height: 13px;line-height: 13px;text-align: center;margin-top: -13px;z-index: 9;position: absolute;}
            .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);margin-left: 1px;position: relative;}
            .slider .ctrl .ctrl-i img{width: 100%;bottom: 50px;opacity: 0;transition: all 0.2s;position: absolute;z-index: 0;margin-left: -50%;}
            .slider .ctrl .ctrl-i:hover{background-color: #F0F0F0}
            .slider .ctrl .ctrl-i:hover img{bottom: 13px;opacity: 1;z-index: 1;
            /*定义预览图的倒影*/
            -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)));
            }
            /*当前展现的状态*/
            .slider .ctrl .ctrl-i:hover, .slider .ctrl .ctrl-i_active{background-color: #000;}
            .slider .ctrl .ctrl-i_active:hover img{opacity: 1}
            /*切换幻灯片的样式*/
            .slider .main .main-i{opacity: 0;position: absolute;right: 50%;transition: all 0.8s;}
            #main_background,.slider .main .main-i_active{opacity: 1;right: 0;}
            #main_background{z-index: 0;opacity: 0.6}
            .slider .main .main-i .caption h2{margin-right: 45px;opacity: 0;}
            .slider .main .main-i .caption h3{margin-left: 45px;opacity: 0;}
            .slider .main .main-i_active .caption h2{margin-right: 0px;opacity: 1; transition: all 0.5s 0.6s;}
            .slider .main .main-i_active .caption h3{margin-left: 0px;opacity: 1; transition: all 0.5s 0.6s;}             
        </style>
        <script> 
            let data = [
                {img:1,h2:"Monday h2", h3:"Monday h3"},
                {img:2,h2:"Tuesday h2", h3:"Tuesday h3"},
                {img:3,h2:"Wednesday h2", h3:"Wednesday h3"},
                {img:4,h2:"Thursday h2", h3:"Thursday h3"},
                {img:5,h2:"Friday h2", h3:"Friday h3"},
            ];

            function addSlider() {
                let tpl_main = document.getElementById("template_main").innerHTML.replace(/^\s*/, "").replace(/\s*$/, "");
                let tpl_ctrl = document.getElementById("template_ctrl").innerHTML.replace(/^\s*/, "").replace(/\s*$/, "");

                console.log(tpl_main);
                console.log(tpl_ctrl);

                let out_main = new Array();
                let out_ctrl = new Array();

                for(i in data) {
                    let _html_main = tpl_main.replace(/{{index}}/g, data[i].img).replace(/{{h2}}/g, data[i].h2).replace(/{{h3}}/g, data[i].h3);

                    let _html_ctrl = tpl_ctrl.replace(/{{index}}/g, data[i].img);

                    out_main.push(_html_main);
                    out_ctrl.push(_html_ctrl);
                }
                document.getElementById("template_main").innerHTML = out_main.join("");
                document.getElementById("template_ctrl").innerHTML = out_ctrl.join("");

            }

            window.onload = function(){
                addSlider();
                switchSlider(1);
            }

            function switchSlider(n) {

                let main = document.getElementById("main_" + n);
                let ctrl = document.getElementById("ctrl_" + n);

                let clear_main = document.getElementsByClassName("main-i");
                let clear_ctrl = document.getElementsByClassName("ctrl-i");

                for(i=0; i<clear_main.length;i++){
                    clear_main[i].className = clear_main[i].className.replace(" main-i_active", "");
                }
                for(i=0; i<clear_ctrl.length;i++){
                    clear_ctrl[i].className = clear_ctrl[i].className.replace(" ctrl-i_active", "");
                }

                main.className += " main-i_active";
                ctrl.className += " ctrl-i_active";
            }         
        </script>
    </head>
    <body>
        <div class="slider">
            <div class="main" id="template_main">
                <div class="main-i" id="main_{{index}}">
                    <img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/img54.jpg" alt="">
                    <div class="caption">
                        <h2>{{h2}}</h2>
                        <h3>{{h3}}</h3>
                    </div>
                </div>
            </div>
            <div class="ctrl" id="template_ctrl">
                <a href="javascript:switchSlider({{index}});" id="ctrl_{{index}}" class="ctrl-i"><img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/img54.jpg" alt=""></a>
            </div>
        </div>
    </body>
</html>