1-5-JS基础-数组应用及实例应用

array 数组一般简写arr

格式 var arr [ '第1个','第2个','第3个','第4个' ] 最后一个不要叫逗号

alert(arr.length) 弹出数组长度 4个

alert(arr[0]) 弹出第1个

alert(arr[arr.length-1]) 找数组最后一个

arr.push 往数组最后一位添加数据 alert(arr) 弹出所有数组的内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html属性操作</title>
<style>
*{ margin:0; padding:0}
#content{ 400px; height:400px; border:10px solid #ccc; margin:40px auto; position:relative; background:#f1f1f1}
#content a{ 40px; height:40px; background:#000; border:5px solid #fff; position:absolute; top:175px; text-align:center; line-height:40px; color:#fff; opacity:1; text-decoration:none}
#content a:hover{opacity:0.8}
#prev{ left:10px;}
#next{right:10px}
#text,#span1{ position:absolute; left:0;  400px; border:0; height:30px; line-height:30px; background:#000; text-align:center; color:#fff;opacity:0.8}
#text{bottom:0;}
#span1{top:0;}
#img1{400px; height:400px;}
</style>
<script>

	
window.onload = function(){
	var oText = document.getElementById('text');
	var oPrev = document.getElementById('prev');
	var oNext = document.getElementById('next');
	var oSpan = document.getElementById('span1');
	var oImg = document.getElementById('img1');
	var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
	var arrText = ['标题1','标题2','标题3','标题4'];
	var num = 0;
	//初始化
	function fnTab(){
    oSpan.innerHTML = num+1+'/'+arrText.length;
	oImg.src=arrUrl[num];
	oText.innerHTML=arrText[num];
		}
	 fnTab();
	
	oNext.onclick = function(){
		num++;
		if(num==arrText.length){
			num=0;
			}
		fnTab();
		}
	oPrev.onclick = function(){
		num--;
		if(num==-1){
			num=arrText.length-1;
			}
		fnTab();
		
		
		}
	}
</script>
</head>

<body>
<div id="content">
<a id="prev" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<p id="text">文字正在加载中</p>
<span id="span1">数量正在计算中</span>
<img id="img1"/>

</div>
</body>
</html>