分享
 
 
 

JavaScript幻灯片效果

王朝html/css/js·作者佚名  2008-05-30
窄屏简体版  字體: |||超大  

源程序:

<!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">

<!--

body { font-size:12px;

}

input {

border-right: #7b9ebd 1px solid;

padding-right: 2px;

border-top: #7b9ebd 1px solid;

padding-left: 2px;

font-size: 12px;

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

border-left: #7b9ebd 1px solid;

cursor: hand;

color: black;

padding-top: 2px;

border-bottom: #7b9ebd 1px solid;

}

.img {

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

border:1px solid #CCCCCC;

}

-->

</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='+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="loading.gif";

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

{

imgs[i]=new Image();

imgs[i].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 && _l < 1)

{

_html = '<img id="showimg" src="' + _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="' + _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[i].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="loading.gif"><br><br>照片已加载:0%</div>

<br><br>

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

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

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

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

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

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

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

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

<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[i].onload=chk;

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

}

</script>

</body>

</html>

http://www.cnblogs.com/PeriFox/archive/2006/08/09/472342.html

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有