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

关于i变量定义问题

// 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].h1).replace(/{{h3}}/g, data[i].h2);
                      var _html_ctrl = tpl_ctrl.replace(/{{index}}/g, data[i].img);
                      
                      out_main.push(_html_main);
                      out_ctrl.push(_html_ctrl);
                  }
                  g('template_main').innerHTML = out_main.join('');
                  g('template_ctrl').innerHTML = out_ctrl.join('');
                  
                  // 7. 增加 # main_background
                  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';
              }

// 7. 增加 # main_background
使用了i的变量，没有发现定义的地方