                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS+CSS3实现带预览图幻灯片效果

源代码（第二部分）

<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="./img9/{{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="./img9/{{index}}.jpg"/>
               </a>
           </div>
           
           <script type="text/javascript">

               // 1、数据定义，生产环境中通过ajax从后台获取到的。数组，里面是对象，对象里面封装数据。
               var data =[
               {img:1,h2:'Creative',h3:'DUET'},
               {img:2,h2:'Friendly',h3:'DEVIL'},
               {img:3,h2:'Transqualer',h3:'COMPATION'},
               {img:4,h2:'Insecure',h3:'HUSLLER'},
               {img:5,h2:'Loving',h3:'REAL'},
               {img:6,h2:'Passtionate',h3:'SEEKER'},
               {img:7,h2:'Crazy',h3:'FRIEND'},
               ];

               // 2、通用函数：根据id或者".classNama"获取元素。
               var g = function(id){
                   // 根据".className"获取元素集合,
                   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(i in data){
                       // 定义临时变量使用_开头。
                       var _html_main = tpl_main
                                       .replace(/{{index}}/g,data[i].img)
                                       .replace(/{{h2}}/g,data[i].h2) // /g表示全局替换
                                       .replace(/{{h3}}/g,data[i].h3)
                                       .replace(/{{css}}/g,['','main-i_right'][i%2]);
                                       /*
                                       这里随机的给main-i添加一个class="main-i_right",通过%2,
                                       有的添加这个样式，有的没有这个样式。
                                       这里的代码非常的简洁非常的有技巧。
                                       然后设置main-i_right样式。
                                       为什么要添加这个样式呢？主要是为了实现图片有的从左边切入，
                                       有的从右边切入。（之前全部都是从右切入）
                                       */

                       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上，这里给每一个div(main-i)中间添加一个空格，否则输出不好看。
                   g("template_main").innerHTML = out_main.join('');
                   g("template_ctrl").innerHTML = out_ctrl.join('');

                   /*
                   完成到前面，功能已经基本实现了，只是还有一个bug，就是在切换图片的时候，
                   右边会有白色的空吧区域，因为slider区的背景颜色是白色的，解决的办法就是
                   动态添加一个main-i，背景是一张{{index}}.jsp图片。在切换的时候，露出的
                   空白区域就不再是白色，而是背景图片，只是这个背景图片的层级比幻灯片要低一些
                   在下层，在上层的话，就把幻灯片图片给盖住了，说白了，就是在幻灯片区域添加一张
                   背景图片。
                   */
                   // 7.1、增加#main_background
                   /*在template_main中间再加上一个main-i，图片和标题的名称都是{{...}},用于过渡作用*/
                   g("template_main").innerHTML += tpl_main
                               .replace(/{{index}}/g,'{{index}}')
                               .replace(/{{h2}}/g,data[i].h2)
                               .replace(/{{h3}}/g,data[i].h3);
                   /*
                   js是没有块级变量的，上面for循环中的变量i在for结束后还可以调用，此时i的值是7。
                   data[7].h2的内容是空的。最后的main-i的id值是：main_{{index}}，修改为：
                   main_background。（这个id的元素设置了样式）。
                   */
                   g("main_{{index}}").id = 'main_background';

               }