首先感谢: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
2 .container{
3 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 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 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 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>
可能会改动的:
1..container{ 280px; height:200px; border:1px solid #eee; position:relative; }根据页面实际需要,修改图片宽度和高度..
2.this.options = {//默认值 Auto: true,//是否自动切换 Pause: 1000,//停顿时间(微妙) Duration: 1,//变换持续时间(秒) Transition: 23,//变换效果(23为随机) List: [],//数据集合,如果这里不设置可以用Add方法添加 onShow: function(){}//变换时执行 };修改持续时间及变换效果,停顿时间
然后把以下代码,放到页面的合适位置(建议不用改动id,class等)
<ul id="idNum">
</ul>
</div>
<div id="idPicText" ></div>
最后在模块下面调用js,
beginLunHuan();
</script>
//添加变换对象
/*
var rvt = new RevealTrans("idPicShow");
rvt.Add('1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
rvt.Add('2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');
rvt.Add('3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');
rvt.Add('4.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');
rvt.Add('5.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');
*/
<% =str %>
var oText = $("idPicText"), arrImg = [];
var oNum = $("idNum"), arrNum = [];
//设置图片列表
Each(rvt.List, function(list, i){
//图片式
var img = document.createElement("img");
img.src = list["img"]; img.alt = list["text"];
arrImg[i] = img;
//按钮式
var li = document.createElement("li");
li.innerHTML = i + 1;
arrNum[i] = li;
oNum.appendChild(li);
//事件设置
img.onmouseover = li.onmouseover = function(){ rvt.Auto = false; rvt.Index = i; rvt.Start(); };
img.onmouseout = li.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
});
//设置图片列表样式 文本显示区域
rvt.onShow = function(){
var i = this.Index, list = this.List[i];
//图片式
Each(arrImg, function(o){ o.className = ""; }); arrImg[i].className = "on";
//按钮式
Each(arrNum, function(o){ o.className = ""; }); arrNum[i].className = "on";
//文本区域
oText.innerHTML = !!list.url ? "<a href='" + list.url + "' target='_blank'>" + list.text + "</a>" : list.text;
}
//文本显示区域
oText.onmouseover = function(){ rvt.Auto = false; rvt.Stop(); };
oText.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
rvt.Start();
}
这里把调用的js放到一个函数体内beginLunHuan(),以免影响整个页面布局(实际的页面body已经是很大很大了)..
必须在模块下调用该函数,因所显示的图片信息从数据库读取的,所以这里用<% str %>,在后台为str赋值,
int pagecount ,rowscount;
dt = tnews.GetList_ByPage("*","moduleCode=100 and isPass=1","inDate desc,newsId desc",1,1,5,out pagecount,out rowscount);
str = "var rvt = new RevealTrans('idPicShow');";
for(int index=0;index<dt.Rows.Count;index++)
{
str+="rvt.Add('"+dt.Rows[index]["picUrl"]+"','"+dt.Rows[index]["newstitle"]+"','newsDetails.aspx?id="+dt.Rows[index]["newsId"]+"');";
}
再次感谢 http://www.cnblogs.com/cloudgamer/,