130-web轮播图

web轮播图



来做一个轮播图
window.onload=function(){

var leftBtn=document.getElementById('btn01');
var rightBtn=document.getElementById('btn02');
var ul=document.getElementById('list');

//初始化位置
var left=0;

//设置一个移动增量
var size= -3;

//将图片列表复制一份
//将5个li变成10个li
ul.innerHTML+=ul.innerHTML

setInterval(fnMove,20);

//移动函数
function fnMove(){
	//自增从操作
	left+=size;

	//左移判断
	if(left<-1000){
	left=0;
	}	
	
	//右移判断
	if(left>0){
	left=-1000;
	}

	//修改定位的值
	ul.style.left=left+"px";
}


leftBtn.onclick=funtion(){
	size=-3;
}

rightBtn.onclick=function(){
	size=3;
}

}



js定时器
<script>
	function fnAlert(){
		alert('abc);
	}

	fnAlert();
</script>

我们把这段代码改成延时的
那么我们使用一下 一次性定时器

<script>
	function fnAlert(){
		alert('abc);
	}

	setTimeout(fnAlert,2000);
</script>

我们把函数名放在setTimeout方法里面
现在这样的话,就会在2秒后调用fnAlert



var oTime=setTimeout(fnAlert,2000);
clearTimeout(oTime);

clearTimeout方法
用来清除一次性定时器




再来说反复执行的定时器
setInterval(fnAlert,2000);
这样就是2秒执行一次

反复执行的定时器也可以被清除
var oTime=setInterval(fnAlert,2000);
clearInterval(oTime)




预解析
fnAlert();

function fnAlert(){
	alert("hello world");
}


一般的函数可以使用预解析
但是变量最好不要使用预解析



document.getElementById
document代表了页面所有标签
其实也就是代表整个html文档



font-size: 10px;
改成
div.fontSize=10px;



btn.onclick=fnOnclick;
不用加()括号

也可以使用匿名函数
btn.onclick=function(){

}



var num='10'
if (num==10)
隐式转换

if (num===10)
这样会比对类型





数组结尾添加和删除
list.push(99);
list.pop();
反转
list.reverse();
添加删除
list.splice(2,1);
list.splice(2,0,3);