JavaScript幻灯片效果

拼吾爱程序人生其他编程 javascript JavaScript幻灯片效果

1 / 1 页

跳转页

查看:1140

个人空间 相册
性别:
来自:
积分:7433
帖子:7194
注册: 2007-07-18

2007-08-05 09:51 | 只看楼主

树型| 收藏| 小中大复制帖子链接到剪贴板1F

JavaScript幻灯片效果

源程序：

Code

[copy to clipboard]

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="expires" content="0">
<title>JavaScript幻灯片效果</title>
<style type="text/css">

</style>
<script language="javascript">
var l=0;
var sum=0;
var _c = 0;
var _i = 0;
var _v = 0;
var _l = 0;
var _fi = 0;
var _sf = 3000;
var _html = null;
var _image = null;
var _mycars= new Array();
var _w = new Array();
var _h = new Array();
var imgs=new Array();
var limg=new Array();
/* 渐隐渐现 */
function transImg(enable){
document.getElementById("showimg").filters.blendtrans.Apply();
document.getElementById("showimg").filters[0].enabled=enable;
document.getElementById("showimg").filters.blendtrans.Play();
}
/* 加载图片 */
function chk(){
l--;
document.getElementById("rotatorPlayer").innerHTML='<img src='http://www.knowsky.com/ limg[0].src '><br><br>' '照片已加载：' parseInt(((sum-
l)*100/sum)).toString() '%'
if (l==0){
adRotator.play();
document.getElementById('stops').disabled='';
document.getElementById('next').disabled='';
}
}
if (document.images){
limg[0]=new Image();
limg[0].src="http://www.knowsky.com/loading.gif";
for(var i=0;i<13;i )
{
imgs=new Image();
imgs.src=parseInt(i 1) ".jpg";
}
}
function adRotator() {}
function adRotator.add(p,w,h)
{
_mycars[_c] = p;
_w[_c] = w;
_h[_c] = h;
_c = _c 1;
}
/* 播放设置 */
function adRotator.loads()
{
if (_i < _mycars.length &;amp;&;amp; _l < 1)
{
_html = '<img id="showimg" src="http://www.knowsky.com/' _mycars[_i] '" width="' _w[_i] '" height="' _h[_i] '" class="img">'
if (_v < 1)
{
document.getElementById('image').value = _html ',' _i;
document.getElementById('rotatorPlayer').innerHTML = _html;
transImg(0);
_i = _i 1;
document.getElementById('backs').disabled='';
transImg(1);
transImg(0);
window.setTimeout("adRotator.loads(" _i ")",_sf);
}
}
else
{
_html = '<img id="showimg" src="http://www.knowsky.com/' _mycars[_i] '" width="' _w[_i] '" height="' _h[_i] '" class="img">'
document.getElementById('image').value = _html ',' _i;
document.getElementById('rotatorPlayer').innerHTML = _html;
transImg(0);
transImg(1);
transImg(0);
}
if (_i 1 > _mycars.length)
{
document.getElementById('stops').disabled='True';
document.getElementById('play').disabled='';
document.getElementById('backs').disabled='';
document.getElementById('next').disabled='True';
_i = 0;
_v = 1;
}
}
/* 播放 */
function adRotator.play()
{
_v = 0;
_l = 0;
adRotator.loads();
}
/* 下一张 */
function adRotator.next()
{
_l = 1;
if(_i 1 < _mycars.length)
{
_i = _i 1;
document.getElementById('play').disabled='';
document.getElementById('stops').disabled='True';
document.getElementById('backs').disabled='';
adRotator.loads();
}
else
{
document.getElementById('next').disabled='True';
}
}
/* 上一张 */
function adRotator.backs()
{
_l = 1;
if(_i-1 < 0)
{
document.getElementById('backs').disabled='True';
}
else
{
_i = _i - 1;
document.getElementById('play').disabled='';
document.getElementById('stops').disabled='True';
document.getElementById('next').disabled='';
adRotator.loads();
}
}
/* 间隔时间 */
function adRotator.set()
{
var _sfc = document.getElementById('second').value;
if (isInteger(_sfc))
{
_sf = _sfc * 1000;
}
else
{
alert('提示：只能输入数字！');
document.getElementById('second').value=1;
document.getElementById('second').select();
}
}
/* 字符检测 */
function isInteger(str)
{
var regu = /^[-]{0,1}[0-9]{1,}$/;
return regu.test(str);
}
/* 暂停 */
function adRotator.stops()
{
_v = 1;
}
/* 添加图片 */
for (var i=0;i<imgs.length;i )
{
adRotator.add(imgs.src,400,300);
}
</script>
</head>
<body>
<table width="420" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div id="rotatorPlayer" style="text-align:center"><img src="http://www.knowsky.com/loading.gif"><br><br>照片已加载：0%</div>
<br><br>
<input type="button" name="play" value="开始播放" disabled="True"/>
<input type="button" name="stops" value="暂停" disabled="True"/>
<input type="button" name="backs" value="上一张" disabled="True"/>
<input type="button" name="next" value="下一张" disabled="True"/>&;amp;nbsp;&;amp;nbsp;&;amp;nbsp;
<input type="text" id="second" value="3" size="3" maxlength="2">
秒
<input type="button" value="设置时间" />
<br><br>
<input name="image" type="text" size="65"/>
</td>
</tr>
</table>
<script language="javascript">
sum=l=imgs.length;
for (var i=0;i<l;i ){
imgs.onload=chk;
imgs.onerror=chk;//无论图片是否加载成功，都执行指定方法
}
</script>
</body>
</html>