上一篇JS教程學習了：JS初學者實例教程(9):下拉菜單和鏈接屬性
實例十
本實例主要介紹了圖像屬性的使用，模擬百度圖片顯示
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>圖像編程</title>
<script language="javascript">
var imageArray = new Array("http://www.poluoluo.com/files/080604/1_1S300O6.jpg","http://www.poluoluo.com/files/080609/1_1646295a.jpg","http://www.poluoluo.com/files/080607/1_11025E49.jpg"," http://www.poluoluo.com/files/080526/1_14563MW.jpg","http://www.poluoluo.com/files/080508/1_1639392S.jpg","http://www.poluoluo.com/upfiles/20070128/290-218.jpg");
var index = 0;
function GetNext()
{
index++;
if(index < imageArray.length) //判斷圖像的下標是否小於數組的長度
{
document.images["saint"].src=imageArray[index]; //如果小於，那麼就顯示該下標所指定的圖像
}
else
{
index = 0;
document.images["saint"].src=imageArray[index]; //如果不小於，那麼就顯示第一幅圖像，並把index值置為0
}
}
function GetPrev()
{
index--;
if(index >= 0) //判斷圖像的下標是否大於0
{
document.images["saint"].src=imageArray[index]; //如果大於，那麼就顯示該下標所指定的圖像
}
else
{
index = imageArray.length-1;
document.images["saint"].src=imageArray[index]; //如果不大於，那麼就顯示最後一幅圖像，並把index值置為數組長度減1
}
}
</script>
</head>
<body>
<img name="saint" src="http://www.poluoluo.com/files/080604/1_1S300O6.jpg" width="400" height="300">
<br>
<a href="javascript:GetNext()">下一幅</a>
<a href="javascript:GetPrev()">上一幅</a>
</body>
</html>
效果演示：