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


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

效果演示:


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



相关阅读:
Jquery下判断Id是否存在的代码
Drupal教程:启用缓存和Gzip压缩
渲染CSS选择器
对YUI扩展的Gird组件 Part-2
关于exchange partition
Javascript制作闪烁的边框
原创]随机增加网站点击的一个不错的方法" target="_blank">[原创]随机增加网站点击的一个不错的方法
关于MSSQL 2005的安装与补丁
SQLServer 设置单词首字母大写
Asp.net 5种页面转向方法
解析Asp.net中资源本地化的实现
看了就知道什么是JSON
模仿IE自动完成功能
FREEBSD6.2 详细安装图解
快速导航

Copyright © 2016 phpStudy |