首先感谢:http://www.cnblogs.com/cloudgamer/,很强很实用的一些js.
本篇原文出自http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html.
因前一段做的一个门户网站首页确实用到了这样的js,轮流显示图片信息,其实很多门户网站都有类似的,可以去查看'页面源代码'寻找可重用js,着实麻烦.当时首先想到的是简单地用marquee 滚动实现,可就是初次打开时有空白出现(可能叫无缝滚动技术,有待下次解决).,后来在网上找的swf实现的,因为图片链接信息,要从数据库中读取,实时更新(可能确实可以,有待解决),,再后来直接整了个静态图片放上面(项目一直拖着,说服务器是unix要转成java做~~~)我呀晕囧o(╯□╰)o.
预实现效果 :::::
首先,头部引入css,和js
1 <style type="text/css">
2 .container{
3 width:280px;
4 height:200px;
5 border:1px solid #eee;
6 position:relative;
7 }
8 #idPicText{
9 background:#eee;
10 line-height:25px;
11 text-align:center;
12 font-weight:bold;
13 width:282px;
14 white-space:nowrap;
15 overflow:hidden;
16 font-size:12px;
17 }
18 #idPicText a{
19 text-decoration:none;
20 color:#333;
21 display:block;
22 }
23
24 #idNum{ position:absolute; right:5px; bottom:5px;}
25 #idNum li{
26 float: left;
27 list-style:none;
28 color: #fff;
29 text-align: center;
30 line-height: 16px;
31 width: 16px;
32 height: 16px;
33 font-family: Arial;
34 font-size: 12px;
35 cursor: pointer;
36 margin: 1px;
37 border: 1px solid #707070;
38 background-color: #060a0b;
39 }
40 #idNum li.on{
41 line-height: 18px;
42 width: 18px;
43 height: 18px;
44 font-size: 14px;
45 border: 0;
46 background-color: #ce0609;
47 font-weight: bold;
48 }
49
50 </style>
51 <script type="text/javascript">
52 var isIE = (document.all) ? true : false;
53
54 var $ = function (id) {
55 return "string" == typeof id ? document.getElementById(id) : id;
56 };
57
58 var Class = {
59 create: function() {
60 return function() { this.initialize.apply(this, arguments); }
61 }
62 }
63
64 var Extend = function(destination, source) {
65 for (var property in source) {
66 destination[property] = source[property];
67 }
68 }
69
70 var Bind = function(object, fun) {
71 return function() {
72 return fun.apply(object, arguments);
73 }
74 }
75
76 var Each = function(list, fun){
77 for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
78 };
79
80
81 //ie only
82 var RevealTrans = Class.create();
83 RevealTrans.prototype = {
84 initialize: function(container, options) {
85 this._img = document.createElement("img");
86 this._a = document.createElement("a");
87
88 this._timer = null;//计时器
89 this.Index = 0;//显示索引
90 this._onIndex = -1;//当前索引
91
92 this.SetOptions(options);
93
94 this.Auto = !!this.options.Auto;
95 this.Pause = Math.abs(this.options.Pause);
96 this.Duration = Math.abs(this.options.Duration);
97 this.Transition = parseInt(this.options.Transition);
98 this.List = this.options.List;
99 this.onShow = this.options.onShow;
100
101 //初始化显示区域
102 this._img.style.visibility = "hidden";//第一次变换时不显示红x图
103 this._img.style.width = this._img.style.height = "100%"; this._img.style.border = 0;
104 this._img.onmouseover = Bind(this, this.Stop);
105 this._img.onmouseout = Bind(this, this.Start);
106 isIE && (this._img.style.filter = "revealTrans()");
107
108 this._a.target = "_blank";
109
110 $(container).appendChild(this._a).appendChild(this._img);
111 },
112 //设置默认属性
113 SetOptions: function(options) {
114 this.options = {//默认值
115 Auto: true,//是否自动切换
116 Pause: 1000,//停顿时间(微妙)
117 Duration: 1,//变换持续时间(秒)
118 Transition: 23,//变换效果(23为随机)
119 List: [],//数据集合,如果这里不设置可以用Add方法添加
120 onShow: function(){}//变换时执行
121 };
122 Extend(this.options, options || {});
123 },
124 Start: function() {
125 clearTimeout(this._timer);
126 //如果没有数据就返回
127 if(!this.List.length) return;
128 //修正Index
129 if(this.Index < 0 || this.Index >= this.List.length){ this.Index = 0; }
130 //如果当前索引不是显示索引就设置显示
131 if(this._onIndex != this.Index){ this._onIndex = this.Index; this.Show(this.List[this.Index]); }
132 //如果要自动切换
133 if(this.Auto){
134 this._timer = setTimeout(Bind(this, function(){ this.Index++; this.Start(); }), this.Duration * 1000 + this.Pause);
135 }
136 },
137 //显示
138 Show: function(list) {
139 if(isIE){
140 //设置变换参数
141 with(this._img.filters.revealTrans){
142 Transition = this.Transition; Duration = this.Duration; apply(); play();
143 }
144 }
145 this._img.style.visibility = "";
146 //设置图片属性
147 this._img.src = list.img; this._img.alt = list.text;
148 //设置链接
149 !!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");
150 //附加函数
151 this.onShow();
152 },
153 //添加变换对象
154 Add: function(sIimg, sText, sUrl) {
155 this.List.push({ img: sIimg, text: sText, url: sUrl });
156 },
157 //停止
158 Stop: function() {
159 clearTimeout(this._timer);
160 }
161 };
162 </script>
2 .container{
3 width:280px;
4 height:200px;
5 border:1px solid #eee;
6 position:relative;
7 }
8 #idPicText{
9 background:#eee;
10 line-height:25px;
11 text-align:center;
12 font-weight:bold;
13 width:282px;
14 white-space:nowrap;
15 overflow:hidden;
16 font-size:12px;
17 }
18 #idPicText a{
19 text-decoration:none;
20 color:#333;
21 display:block;
22 }
23
24 #idNum{ position:absolute; right:5px; bottom:5px;}
25 #idNum li{
26 float: left;
27 list-style:none;
28 color: #fff;
29 text-align: center;
30 line-height: 16px;
31 width: 16px;
32 height: 16px;
33 font-family: Arial;
34 font-size: 12px;
35 cursor: pointer;
36 margin: 1px;
37 border: 1px solid #707070;
38 background-color: #060a0b;
39 }
40 #idNum li.on{
41 line-height: 18px;
42 width: 18px;
43 height: 18px;
44 font-size: 14px;
45 border: 0;
46 background-color: #ce0609;
47 font-weight: bold;
48 }
49
50 </style>
51 <script type="text/javascript">
52 var isIE = (document.all) ? true : false;
53
54 var $ = function (id) {
55 return "string" == typeof id ? document.getElementById(id) : id;
56 };
57
58 var Class = {
59 create: function() {
60 return function() { this.initialize.apply(this, arguments); }
61 }
62 }
63
64 var Extend = function(destination, source) {
65 for (var property in source) {
66 destination[property] = source[property];
67 }
68 }
69
70 var Bind = function(object, fun) {
71 return function() {
72 return fun.apply(object, arguments);
73 }
74 }
75
76 var Each = function(list, fun){
77 for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
78 };
79
80
81 //ie only
82 var RevealTrans = Class.create();
83 RevealTrans.prototype = {
84 initialize: function(container, options) {
85 this._img = document.createElement("img");
86 this._a = document.createElement("a");
87
88 this._timer = null;//计时器
89 this.Index = 0;//显示索引
90 this._onIndex = -1;//当前索引
91
92 this.SetOptions(options);
93
94 this.Auto = !!this.options.Auto;
95 this.Pause = Math.abs(this.options.Pause);
96 this.Duration = Math.abs(this.options.Duration);
97 this.Transition = parseInt(this.options.Transition);
98 this.List = this.options.List;
99 this.onShow = this.options.onShow;
100
101 //初始化显示区域
102 this._img.style.visibility = "hidden";//第一次变换时不显示红x图
103 this._img.style.width = this._img.style.height = "100%"; this._img.style.border = 0;
104 this._img.onmouseover = Bind(this, this.Stop);
105 this._img.onmouseout = Bind(this, this.Start);
106 isIE && (this._img.style.filter = "revealTrans()");
107
108 this._a.target = "_blank";
109
110 $(container).appendChild(this._a).appendChild(this._img);
111 },
112 //设置默认属性
113 SetOptions: function(options) {
114 this.options = {//默认值
115 Auto: true,//是否自动切换
116 Pause: 1000,//停顿时间(微妙)
117 Duration: 1,//变换持续时间(秒)
118 Transition: 23,//变换效果(23为随机)
119 List: [],//数据集合,如果这里不设置可以用Add方法添加
120 onShow: function(){}//变换时执行
121 };
122 Extend(this.options, options || {});
123 },
124 Start: function() {
125 clearTimeout(this._timer);
126 //如果没有数据就返回
127 if(!this.List.length) return;
128 //修正Index
129 if(this.Index < 0 || this.Index >= this.List.length){ this.Index = 0; }
130 //如果当前索引不是显示索引就设置显示
131 if(this._onIndex != this.Index){ this._onIndex = this.Index; this.Show(this.List[this.Index]); }
132 //如果要自动切换
133 if(this.Auto){
134 this._timer = setTimeout(Bind(this, function(){ this.Index++; this.Start(); }), this.Duration * 1000 + this.Pause);
135 }
136 },
137 //显示
138 Show: function(list) {
139 if(isIE){
140 //设置变换参数
141 with(this._img.filters.revealTrans){
142 Transition = this.Transition; Duration = this.Duration; apply(); play();
143 }
144 }
145 this._img.style.visibility = "";
146 //设置图片属性
147 this._img.src = list.img; this._img.alt = list.text;
148 //设置链接
149 !!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");
150 //附加函数
151 this.onShow();
152 },
153 //添加变换对象
154 Add: function(sIimg, sText, sUrl) {
155 this.List.push({ img: sIimg, text: sText, url: sUrl });
156 },
157 //停止
158 Stop: function() {
159 clearTimeout(this._timer);
160 }
161 };
162 </script>