学习Js小结

跟着慕课网老师码代码，对于JS还是有不少陌生，需要大量的总结，任重而道远。

脚本功能开发:
内容输出:Template改造 输出幻灯片&控制按钮 图片位置调整
切换控制:切换幻灯片 .main-i_active 切换控制按钮 .ctrl-i_active

0.修改 View->Template(关键字替换)，增加template id
id=template_main
{{index}}{{h2}}{{h3}}
切换幻灯片函数：switchSlide();
1.数据定义（实际生产环境中，应由后台给出）
2.通用函数
var g = function(id);
3.添加幻灯片的操作（所有幻灯片&对应的按钮）
function addSliders(){
3.1 获取模板
var tpl_main = g('template_mai').innerHTML.replace(/^\s*/,'')
.replace(/\s*$/,'');
var tpl_ctrl;
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(...);
var _html_ctrl;
out_main.push(_html_main);
out_ctrl
3.4把HTML回写到对应的DOM里面
g('template_main').innerHTML = out_main.join('');
g('template_ctrl')
}
5.幻灯片切换
function switchSlider(n)
5.1获得要展现的幻灯片&控制按钮 DOM
var main = g('main_'+n);
var ctrl;
5.2获得所有的幻灯片以及控制按钮
var clear_main = g('.main-i')
var clear_ctrl;
5.3清除他们的active样式
for(int i = 0; i < clear_main.length; i++)
clear_main[i].className = clear_main[i].className.replace(' main-i_active', '');
clear_ctrl[i]...
//5.4为当前控制按钮和幻灯片附加样式
main.className += ' main-i_active';
ctrl.className += '';

4.定义何时处理幻灯片输出
window.onload = function()
switchSlider(1);

优化:
动态全屏居中显示幻灯片:
Js获得Height,设置margin-top:-1*Height/2,样式配合：top:50%;
切换幻灯片时，不显示白底:
增加#main_background 把移走的幻灯片作为切换时背景

 

语法：

数据定义:

var data = [
　　{A:1,B:2,C:3},
　　{A:1,B:2,C:3},
　　{A:1,B:2,C:3},
　　{A:1,B:2,C:3}

];

函数:

var g = function(id) {
　　if(id.substr(0, 1) == '.')
　　　　return document.getElementsByClassName(id.substr(1));
　　return document.getElementById(id);

}

获取模板:
var tpl_main = g('template_main').innerHTML

　　.replace(/^\s*/,'')
　　.replace(/\s*$/,'');

数组&正则表达式:
var out_main = [];

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)
　　　　.replace(/{{css}}/g, ['','main-i_right'][i%2]);
　　out_main.push(_html_main);
}

g('template_main').innerHTML = out_main.join('');

g('main_{{index}}').id = 'main_background';

输出:

window.onload = function(){

　　

}

其它:

var main = g('main_'+n);

clear_main[i].className = clear_main[i].className.replace(' main-i_active', '');

main.className += ' main-i_active';

setTimeout(function(){
　　g('main_background').innerHTML = main.innerHTML;

},1000)

pictures[i].clientHeight