Javascript初学者实例教程(10):图像属性

http://www.itjxue.com  2015-08-06 23:20  来源:未知  点击次数: 

上一篇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.itjxue.com/files/080604/1_1S300O6.jpg","http://www.itjxue.com/files/080609/1_1646295a.jpg","http://www.itjxue.com/files/080607/1_11025E49.jpg"," http://www.itjxue.com/files/080526/1_14563MW.jpg","http://www.itjxue.com/files/080508/1_1639392S.jpg","http://www.itjxue.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.itjxue.com/files/080604/1_1S300O6.jpg" width="400" height="300">
<br>
<a href="javascript:GetNext()">下一幅</a>
<a href="javascript:GetPrev()">上一幅</a>
</body>
</html>

效果演示:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章