JavaScript幻灯片效果[转载]

Posted on 2006-08-09 16:45 刘建锋阅读(375) 评论(0) 收藏举报

效果图：

源程序：

<!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>JavaScript幻灯片效果</title>
7

<!--
9

body { font-size:12px;
10

}
11

input {
12

border-right: #7b9ebd 1px solid;
13

padding-right: 2px;
14

border-top: #7b9ebd 1px solid;
15

padding-left: 2px;
16

font-size: 12px;
17

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
18

border-left: #7b9ebd 1px solid;
19

cursor: hand;
20

color: black;
21

padding-top: 2px;
22

border-bottom: #7b9ebd 1px solid;
23

}
24

.img {
25

filter:alpha(opacity=1,enabled=1) blendtrans(duration=1);
26

border:1px solid #CCCCCC;
27

}
28

-->
29

</style>
30

var l=0;
32

var sum=0;
33

var _c = 0;
34

var _i = 0;
35

var _v = 0;
36

var _l = 0;
37

var _fi = 0;
38

var _sf = 3000;
39

var _html = null;
40

var _image = null;
41

var _mycars= new Array();
42

var _w = new Array();
43

var _h = new Array();
44

var imgs=new Array();
45

var limg=new Array();
46

/* 渐隐渐现 */
48

function transImg(enable){
49

document.getElementById("showimg").filters.blendtrans.Apply();
50

document.getElementById("showimg").filters[0].enabled=enable;
51

document.getElementById("showimg").filters.blendtrans.Play();
52

}
53

/* 加载图片 */
55

function chk(){
57

l--;
58

document.getElementById("rotatorPlayer").innerHTML='<img src='+limg[0].src+'><br><br>' + '照片已加载：' + parseInt(((sum-
59

l)*100/sum)).toString() + '%'
61

if (l==0){
62

adRotator.play();
63

document.getElementById('stops').disabled='';
64

document.getElementById('next').disabled='';
65

}
66

}
67

if (document.images){
69

limg[0]=new Image();
70

limg[0].src="loading.gif";
71

for(var i=0;i<13;i++)
72

{
73

imgs[i]=new Image();
74

imgs[i].src=parseInt(i+1)+".jpg";
75

}
76

}
77

function adRotator() {}
79

function adRotator.add(p,w,h)
81

{
82

_mycars[_c] = p;
83

_w[_c] = w;
84

_h[_c] = h;
85

_c = _c + 1;
86

}
87

/* 播放设置 */
89

function adRotator.loads()
90

{
91

if (_i < _mycars.length && _l < 1)
92

{
93

_html = '<img id="showimg" src="' + _mycars[_i] + '" width="' + _w[_i] + '" height="' + _h[_i] + '" class="img">'
94

if (_v < 1)
95

{
96

document.getElementById('image').value = _html + ',' + _i;
97

document.getElementById('rotatorPlayer').innerHTML = _html;
98

transImg(0);
99

_i = _i + 1;
100

document.getElementById('backs').disabled='';
101

transImg(1);
102

transImg(0);
103

window.setTimeout("adRotator.loads("+_i+")",_sf);
104

}
105

}
106

else
107

{
108

_html = '<img id="showimg" src="' + _mycars[_i] + '" width="' + _w[_i] + '" height="' + _h[_i] + '" class="img">'
109

document.getElementById('image').value = _html + ',' + _i;
110

document.getElementById('rotatorPlayer').innerHTML = _html;
111

transImg(0);
112

transImg(1);
113

transImg(0);
114

}
115

if (_i+1 > _mycars.length)
116

{
117

document.getElementById('stops').disabled='True';
118

document.getElementById('play').disabled='';
119

document.getElementById('backs').disabled='';
120

document.getElementById('next').disabled='True';
121

_i = 0;
122

_v = 1;
123

}
124

}
125

126

/* 播放 */
127

function adRotator.play()
128

{
129

_v = 0;
130

_l = 0;
131

adRotator.loads();
132

}
133

134

/* 下一张 */
135

function adRotator.next()
136

{
137

_l = 1;
138

if(_i+1 < _mycars.length)
139

{
140

_i = _i + 1;
141

document.getElementById('play').disabled='';
142

document.getElementById('stops').disabled='True';
143

document.getElementById('backs').disabled='';
144

adRotator.loads();
145

}
146

else
147

{
148

document.getElementById('next').disabled='True';
149

}
150

}
151

152

/* 上一张 */
153

function adRotator.backs()
154

{
155

_l = 1;
156

if(_i-1 < 0)
157

{
158

document.getElementById('backs').disabled='True';
159

}
160

else
161

{
162

_i = _i - 1;
163

document.getElementById('play').disabled='';
164

document.getElementById('stops').disabled='True';
165

document.getElementById('next').disabled='';
166

adRotator.loads();
167

}
168

}
169

170

/* 间隔时间 */
171

function adRotator.set()
172

{
173

var _sfc = document.getElementById('second').value;
174

if (isInteger(_sfc))
175

{
176

_sf = _sfc * 1000;
177

}
178

else
179

{
180

alert('提示：只能输入数字！');
181

document.getElementById('second').value=1;
182

document.getElementById('second').select();
183

}
184

}
185

186

/* 字符检测 */
187

function isInteger(str)
188

{
189

var regu = /^[-]{0,1}[0-9]{1,}$/;
190

return regu.test(str);
191

}
192

193

/* 暂停 */
194

function adRotator.stops()
195

{
196

_v = 1;
197

}
198

199

/* 添加图片 */
200

for (var i=0;i<imgs.length;i++)
201

{
202

adRotator.add(imgs[i].src,400,300);
203

}
204

205

</script>
206

</head>
207

208

<body>
209

<table width="420" border="0" align="center" cellpadding="0" cellspacing="0">
210

<tr>
211

<td align="center">
212

<div id="rotatorPlayer" style="text-align:center"><img src="loading.gif"><br><br>照片已加载：0%</div>
213

<br><br>
214

<input type="button" name="play" value="开始播放" onClick="adRotator.play();this.disabled='true';document.getElementById
215

216

('stops').disabled=''" disabled="True"/>
217

<input type="button" name="stops" value="暂停" onClick="adRotator.stops();this.disabled='true';document.getElementById
218

219

('play').disabled=''" disabled="True"/>
220

<input type="button" name="backs" value="上一张" onClick="adRotator.backs();" disabled="True"/>
221

<input type="button" name="next" value="下一张" onClick="adRotator.next();" disabled="True"/>   
222

<input type="text" id="second" value="3" size="3" maxlength="2">
223

秒
224

<input type="button" value="设置时间" onClick="adRotator.set()" />
225

<br><br>
226

<input name="image" type="text" size="65"/>
227

</td>
228

</tr>
229

</table>
230

sum=l=imgs.length;
232

for (var i=0;i<l;i++){
233

imgs[i].onload=chk;
234

imgs[i].onerror=chk;//无论图片是否加载成功，都执行指定方法
235

}
236

</script>
237

</body>
238

</html>
239

刷新页面返回顶部

榴莲的味道

公告

JavaScript幻灯片效果[转载]