array.push:给数组最后增加元素
数据类型
1.对象（[ ],{ },null）object
2.数字number
3.字符串string
4.函数function
5.未定义undefined
6.布尔booleam
字符串转换成数字
Number（）
Number是整体转化
Number（function（）{}）；//转化为NaN，非数字
Number（['']）;//0
Number（[1,2,3]）;//NaN
Number（{}）;//NaN
Number（null）;//0
对象和有多个数据的数组都会转化为NaN
parseInt：解析成整数，只能转字符串，其他的都不能转；从左到右一位一位的看，如果遇到非数字就停止，也认一些数字：如 空格，+，-，10px
parseFloat（浮点数）：可以转化小数，认小数
隐式类型转换
在做加法时，如果有字符串，会将我的操作数都变成字符串，然后再相加 如：'1'+1;//11
"-"：会转换成数字 如 '10'-1;//9
- ,/ ,% ,*:都会转换成数字
字符串比较：'9'<'10';//false 是一位一位的比较 先比较9<1
NaN
NaN：not a number 不是个 数字 的 数字类型
NaN 可以看成是false
NaN自己和自己都不相等 NaN==NaN是false
isNaN(NaN)是true
封装函数
1.先将代码全部放在函数中，调用确保可运行
2.修改我的顶点元素，防止外部的影响
3.将变化的信息变成自变量,形成可以定制化的效果
4.html结果尽量保持一致
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 350px;
float: left;
margin: 50px;
position: relative;
}
img{
width: 100%;
}
ul{
list-style: none;
position: absolute;
top: -10px;
right: -60px;
}
li{
height: 50px;
width: 50px;
background: #ccc;
margin-top: 10px;
}
li.active{
background: yellow;
}
</style>
</head>
<body>
<div class="box" id="box1">
<img src="img/1.png" alt="" class="img1">
<ul>
</ul>
</div>
<div class="box" id="box2">
<img src="img/1.png" alt="" class="img1">
<ul>
</ul>
</div>
<div class="box" id="box3">
<img src="img/1.png" alt="" class="img1">
<ul>
</ul>
</div>
<script>
function changeImgs(oBox ,imgs){
// var arr = ['img/1.png','img/2.png','img/3.png','img/4.png', 'img/4.png', 'img/4.png'];
var arr = imgs;
var oImg = oBox.getElementsByClassName('img1')[0];
var aLi = oBox.getElementsByTagName('li');
var oUl = oBox.getElementsByTagName('ul')[0];
//当前的选择索引
var cur = 0;//第一张图片
//根据图片的个数动态的生成li
var str = '';
for(var i=0;i<arr.length;i++){
if(i==cur){
str = str + '<li class="active"></li>';
}
else{
str = str + '<li></li>';
}
}
oImg.src = arr[cur];
oUl.innerHTML = str;
function onSelect(){
//切换图片
oImg.src = arr[this.index];
//改变按钮样式
// this.className = 'active';
//两种方式：
//第一种： 先清除所有li的class, 然后在点击的li加上.active
// for(var i=0;i<aLi.length;i++){
// aLi[i].className = '';
// }
// this.className = 'active';
//第二种方法： 先清除之前选择的li, 然后在点击的li加上.active
aLi[cur].className = '';
this.className = 'active';
cur = this.index;
}
for(var i=0;i<aLi.length;i++){
//添加点击函数
aLi[i].index = i;
aLi[i].onclick = onSelect;
}
}
var oBox = document.getElementById("box1");
var oBox2 = document.getElementById("box2");
var oBox3 = document.getElementById("box3");
changeImgs(oBox, ['img/1.png','img/2.png', 'img/3.png']);
changeImgs(oBox2, ['img/3.png','img/4.png']);
changeImgs(oBox3, ['img/3.png','img/4.png', 'img/1.png']);
//封装成函数
1. html结果尽量保持一致
1. 先将代码全部放在函数中， 测试，确保可运行
2. 修改我的顶点元素，防止对外部的影响
3. 将变化的信息变成自变量，形成可以定制化的效果
</script>
</body>
</html>
