图片轮换效果在网上其实很常见了,各种各样的都有,我写一个并不是为什么什么的,只是为了自己方便,还有就是对于JS的学习练手,我的实例一般只能在IE下运行,所以在其它的浏览器中查看不保证效果。
HTML调用页代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" >
3<head>
4 <title>图片轮换效果测试页</title>
5 <script type="text/javascript" src="ImgRepeat.js"></script>
6</head>
7<body>
8 <div id="divShow" style="border: solid 4px #ccc; width: 175px;">
9 <script type="text/javascript">
10 // 以下参数有 * 号的为必须提供 *
11 var irc = new ImgRepeatClass();
12 // 图片文件存放路径(指向图片所在目录即可) *
13 irc.Path = "./Images";
14 // 承载对象的元素 id *
15 irc.ParentId = "divShow";
16 // 是否自动播放
17 irc.IsAutoPlay = true;
18 // 是否显示图片链接
19 irc.IsImageHref = true;
20 // 是否显示切换图片链接
21 irc.IsImageLink = true;
22 // 图片轮换间隔(单位为秒)
23 irc.Interval = 3;
24 // 切换区域大小(一般就设置图片大小即可)
25 irc.Width = 175;
26 irc.Height = 116;
27 // 添加图片(参数依次表示:图片名称,链接到的网址,链接的文字,图片alt或图片链接的title) *
28 irc.Add("1.jpg","http://www.163.com","链接到163.com","一个好图片");
29 irc.Add("2.jpg","http://www.163.net","链接到163.net");
30 irc.Add("3.jpg","http://www.163.com","链接到163");
31 irc.Add("4.jpg","http://www.csdn.net","CSDN程序员大本营一般就设置图片大小即可");
32 irc.Add("5.jpg","http://www.yahoo.com","Yahoo");
33 irc.Add("6.jpg","http://www.csdn.net","CSDN程序员大本营");
34 irc.Add("7.jpg","http://www.163.com","链接到163");
35 irc.Add("8.jpg","http://www.csdn.net","CSDN程序员大本营");
36 // 应用
37 irc.Apply();
38 </script>
39 </div>
40</body>
41</html>
42
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" >
3<head>
4 <title>图片轮换效果测试页</title>
5 <script type="text/javascript" src="ImgRepeat.js"></script>
6</head>
7<body>
8 <div id="divShow" style="border: solid 4px #ccc; width: 175px;">
9 <script type="text/javascript">
10 // 以下参数有 * 号的为必须提供 *
11 var irc = new ImgRepeatClass();
12 // 图片文件存放路径(指向图片所在目录即可) *
13 irc.Path = "./Images";
14 // 承载对象的元素 id *
15 irc.ParentId = "divShow";
16 // 是否自动播放
17 irc.IsAutoPlay = true;
18 // 是否显示图片链接
19 irc.IsImageHref = true;
20 // 是否显示切换图片链接
21 irc.IsImageLink = true;
22 // 图片轮换间隔(单位为秒)
23 irc.Interval = 3;
24 // 切换区域大小(一般就设置图片大小即可)
25 irc.Width = 175;
26 irc.Height = 116;
27 // 添加图片(参数依次表示:图片名称,链接到的网址,链接的文字,图片alt或图片链接的title) *
28 irc.Add("1.jpg","http://www.163.com","链接到163.com","一个好图片");
29 irc.Add("2.jpg","http://www.163.net","链接到163.net");
30 irc.Add("3.jpg","http://www.163.com","链接到163");
31 irc.Add("4.jpg","http://www.csdn.net","CSDN程序员大本营一般就设置图片大小即可");
32 irc.Add("5.jpg","http://www.yahoo.com","Yahoo");
33 irc.Add("6.jpg","http://www.csdn.net","CSDN程序员大本营");
34 irc.Add("7.jpg","http://www.163.com","链接到163");
35 irc.Add("8.jpg","http://www.csdn.net","CSDN程序员大本营");
36 // 应用
37 irc.Apply();
38 </script>
39 </div>
40</body>
41</html>
42
效果图片:
下载:图片轮换效果
学习中,请批评指正!呵呵...