JavaScript 2 轮播图,闭包,留言板案例

javascript 2

基本的模块化开发

/*
	 在javascript语言里， 封装一般来讲，就是把散着写的js代码， 给放在函数里，这个就是封装了。
index.html 
	\_css\index.css
	\_js\main.js 
		\index.js 
			\_logoEventFn函数 
			\_createNavFn函数 
	\	common.js 
	\_data
			\data.js 
	\_images
上面这样做的目的，
- 有限程度的复用； 
- 可扩展； 
- 松耦合 
- 模块化
- ... 
模块设计的原则之一，【每个模块、函数，只做一件事情】 
*/

new关键字

生成、创建，一个用户定义的函数的实例，
语法：new 函数名() 
new操作符生成的实例，可以调用函数的内置的自定义的方法。
利用new关键字创建的函数可以称之为构造函数
构造函数中的this指向构造函数的实例

轮播图原理

/*
	动态生成图片	
*/
    // 动态生成ul的宽度
 		var _ul_sliderId = gId('ul_sliderId');
	//图片的宽度等于图片的数量乘以1142px
   		 _ul_sliderId.style.width = _sliderArrData.length * 1142 + 'px';
     // 生成li的dom节点
    // 声明一个变量值为空
    var _html = '';
    for (var i = 0; i < _sliderArrData.length; i++) {
   
        // console.log(_sliderArrData[i].img_url);
        // 通过+=赋值运算符为变量赋值,将li img标签动态添加上去
        _html += '<li><img src=' + _sliderArrData[i].img_url + ' > </li>'
        // 将标签写入ul之中
        gId('ul_sliderId').innerHTML = _html;
    }

/*
	让图片"动"起来实际上是修改ul的left值 -left值
*/
/*
	左右按钮点击事件
*/
    // 点击事件要写在生成节点之后
	//设置计数器控制点击次数
    var _num = 0;
    _left_btn_id.onclick = function() {
   
        if (_num > 0) {
   
            _num--;
        } else {
   
            _num = _imgNum - 1;
        }
        _ul_sliderId.style.left = -1142 * _num + 'px';
    }
    _right_btn_id.onclick = function() {
   
        if (_num < (_imgNum - 1)) {
   
            _num++;
        } else {
   
            _num = 0;
        }
        _ul_sliderId.style.left = -1142 * _num + 'px';
    }

/*
	for循环动态生成小圆点的数量
*/
	var _slider_circle_id = gId('slider_circle_id');
    for (var i = 0; i < _imgNum; i++) {
   
        var _span = cDom('span&