学习总结（十一周）（考核周）

学习总结

轮播图

html部分

		<!-- 创建外部div -->
		<div id="outer">
			<ul id="imgList">
				<li><img src="./img/01.jpg" /></li>
				<li><img src="./img/02.jpg" /></li>
				<li><img src="./img/03.jpg" /></li>
				<li><img src="./img/04.jpg" /></li>
				<li><img src="./img/01.jpg" /></li>
			</ul>
			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>

CSS部分

			/*清除浏览器默认样式*/
			*{
				margin: 0;
				padding: 0;
			}
			img{
				width: 490px;
				height: 627px;
			}
			#outer{
				width: 500px;
				height: 630px;
				margin: 50px auto;
				background-color: aqua;
				position: relative;
				overflow: hidden;
			}
			#imgList{
				list-style: none;
				position: absolute;			}
			#imgList li{
				float: left;
				margin: 0 10px;
			}
			#navDiv{
				position: absolute;
				bottom:15px;
				left: 50%;
			}
			/*导航点样式*/
			#navDiv a{
				float: left;
				width: 10px;
				height: 10px;
				margin: 0 5px;
				border-radius:5px;
				background-color: pink;
			}
			/*鼠标悬浮变色*/
			#navDiv a:hover{
				background-color: black;
			}

JS部分

window.onload = function(){
				var imgList = document.getElementById("imgList");
				var imgArr = document.getElementsByTagName("img");
				imgList.style.width = 510*imgArr.length+"px";
				//默认显示图片索引
				var index = 0;
				//获取所有的a
				var allA = document.getElementsByTagName("a");
				//设置默认选中效果
				allA[index].style.backgroundColor = "black";
				//点击超链接切换图片
				//为所有超链接绑定单击响应函数
				for(var i=0;i<allA.length;i++){
					//为每个超链接添加一个num属性
					allA[i].num = i;
					//为超链接绑定单击响应函数
					allA[i].onclick = function(){
						//关闭自动切换的定时器
						clearInterval(timer);
						//获取点击超链接的索引,并将其设为index
						index = this.num;
						//切换图片
						// imgList.style.left = -510*index + "px";
						//设置选中的a
						setA();
						//使用move函数
						mover(imgList,"left", -510*index , 20 ,function(){
							//动画执行完毕，开启自动切换
							autoChange();
						});
					};
				}
				//开启自动切换图片
				autoChange();
				
				
				//创建一个方法用来设置选中的a
				function setA(){
					//判断当前索引是否是最后一张图片
					if(index >= imgArr.length - 1){
						//则将index设置为0
						index = 0;
						//此时显示的最后一张图片，而最后一张和第一张是一模一样
						//通过css将最后一张切换成第一张
						imgList.style.left = 0;
					}
					for(var i=0;i<allA.length;i++){
						allA[i].style.backgroundColor = "";
					}
					allA[index].style.backgroundColor = "black";
				};
				
				var timer;
				function autoChange(){
					//开启定时器，定时切换照片
					timer = setInterval(function(){
						//索引自增
						index++;
						//判断index的值
						index %= imgArr.length;
						//执行动画,切换图片
						mover(imgList,"left",-510*index,20,function(){
							//修改导航点
							setA();
						});
						
					},2000);
				}
			};

move函数（理解）

var timer;
/*参数：
	obj：要执行动画的对象   
	attr:要执行动画的样式,eg:left  top  width  height
	target:执行动画的目标位置
	speed:移动的速度（正数向右，负数向左）   
	callback：回调函数，会在动画执行完毕后执行
*/
function mover(obj,attr,target,speed,callback){
	//关闭上一个定时器
	clearInterval(obj.timer);
	//获取元素当前位置
	var current = parseInt(getStyle(obj,attr));
	//判断速度的正负值
	if(current > target){
		//此时速度应为负值
		speed = -speed;
	}
	//开启一个定时器，用来执行动画效果
	//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
	obj.timer = setInterval(function(){
		//获取原来的attr值
		var oldValue = parseInt(getStyle(obj,attr));
		//在旧值的基础上增加
		var newValue = oldValue + speed;
		//向左移动时，需要判断newValue是否小于target
		//向右移动时，需要判断newValue是否大于target
		if((speed < 0 && newValue < target) || (speed>0 && newValue > target)){
			newValue = target;
		}
		obj.style[attr]= newValue + "px";
		if(newValue == target){
			//关闭定时器
			clearInterval(obj.timer);
			//动画执行完毕，调用回调函数
			callback && callback();
		}
	},30);
}
/* 定义一个函数，用来获取指定元素的当前样式
 * 参数：
 * 	obj 要获取样式的元素
 * 	name 要获取的样式名
 */
function getStyle(obj,name){
	if(window.getComputedStyle){
		//正常浏览器的方式，具有getComputedStyle()方法
		return getComputedStyle(obj,null)[name];
	}else {
		//IE8的方式
		return obj.currentStyle[name];
	}
}

考核总结

本周考核难点在于各种不同的轮播图，跟着视频写完不能完全理解，写的很多东西不知道怎么用，没有完全掌握，一些知识点没有掌握，学完就忘记，也不能很好的理解。

考核漏洞

1. 相等运算符
比较两个值是否相等，相等返回true，不相等返回false
==
如果类型不同则会自动进行类型转换
undefined 衍生自 null，所以这两个值做相等判断时,会返回true
NaN不和任何值相等，包括他本身；可以通过isNaN()函数来判断一个值是否是NaN
！= 不相等
不相等用来判断两个值是否不相等,如果不相等返回true,否则返回false
不相等也会对变量进行自动的类型转换,如果转换后相等它也会返回false
=== 全等
用来判断两个值是全等,它和相等类似,不同的是它不会自动转换类型
如果两个值的类型不同,直接返回false
！== 不全等
用来判断两个值是否不全等,它和相等类似,不同的是它不会自动转换类型
如果两个值的类型不同,直接返回true
（重点：==&===的区别）
2.创建对象的方法
1）使用new关键字调用的函数,是构造函数constructor
构造函数是专门用来创建对象的函数
使用typeof检查一个对象时,会返回object
2）使用工厂方法创建对象

3.DOM
Document Object Model文档对象模型
文档 文档表示的就是整个的HTML网页文档
对象 对象表示将网页中的每一个部分都转换为了一个对象。
模型 使用模型来表示对象之间的关系,这样方便我们获取对象。
4.延时调用和定时调用的区别
定时调用会执行多次，而延时调用只会执行一次
延时调用和定时调用实际上是可以互相代替的

下周计划

开始期末总复习，完成实训周项目，复习专业课知识，备战期末

生活小结

本周趁着放假回了家，吃到了亲爱的妈妈做的饭，我可真是个妈宝女，总之是快乐的一周，等下还要去看一闪一闪亮星星，张万森等我哦