【JS+CSS3】实现带预览图幻灯片效果的示例代码_javascript技巧

输出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) .replace(/{{h3}}/g,data[i].h3) .replace(/{{css}}/g,['','main_i_right'][i%2]); 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(''); // 7、增加#main_background g('template_main').innerHTML += tpl_main .replace(/{{index}}/g,'{{index}}') .replace(/{{h2}}/g,data[i].h2) .replace(/{{h3}}/g,data[i].h3); g('main_{{index}}').id = 'main_background'; } // 5、幻灯片切换 function switchSliders(n){ // 5.1 获得要展现的幻灯片&控制按钮 DOM var main = g("main_"+n); var ctrl = g("ctrl_"+n); // 5.2 获得所有的幻灯片&控制按钮 var clear_main = g('.main_i'); var clear_ctrl = g('.ctrl_i'); // 5.3 清除他们的active样式 for(var i=0;i输出 window.onload = function(){ addSliders(); switchSliders(1); setTimeout(function(){ movePictures(); },100) }