图片轮换效果在网上其实很常见了,各种各样的都有,我写一个并不是为什么什么的,只是为了自己方便,还有就是对于JS的学习练手,我的实例一般只能在IE下运行,所以在其它的浏览器中查看不保证效果。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/javascript">![](https://www.cnblogs.com/Images/dot.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
效果图片:
下载:图片轮换效果
学习中,请批评指正!呵呵...