<script type="text/javascript">

        //1. 数据定义（实际生产环境中，应由后台给出）

        var data = [

        {img:1,h2:'MON',h3:'Monday'},

        {img:2,h2:'TUE',h3:'Tuesday'},

        {img:3,h2:'WED',h3:'Wednesday'},

        {img:4,h2:'THU',h3:'Thursday'},

        {img:5,h2:'FRI',h3:'Friday'},

        {img:6,h2:'SAT',h3:'Saturday'},

        {img:7,h2:'SUN',h3:'Sunday'}

        ];

        //2. 通用函数

        var g = function (id){

        if(id.substr(0,1)=='.'){

        return document.getElementsByClassName(id.substr(1));

        }

        return document.getElementById(id);

        }

        //3. 添加幻灯片的操作（所有幻灯片&对应的按钮）

        function addSliders(){

        //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( var i in data ){

        // 定义临时的幻灯片数据

        var _html_main = tpl_main

                    .replace(/{{index}}/g,data[i].img)

                    .replace(/{{h2}}/g,data[i].h2)

                    .replace(/{{h3}}/g,data[i].h3);

        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('');

        }

        //4. 定义何时处理幻灯片输出

        window.onload = function(){

        addSliders();

        }

        </script>