游客:
注册
|
登录
|
帮助
网友俱乐部
»
网页制作
»
Javascript教程
» JavaScript幻灯片效果
网友生活网
|
网友学堂
如何获得金币?
诚招斑竹
IP归属地查询 PR查询 收录查询 whois查询
免费超短2级域名,your.jpy.cc
传世私服
|
传奇世界私服
注册亚洲交友中心,找个人来同居吧!
免费存储空间,免费网络硬盘
‹‹ 上一主题
|
下一主题 ››
投票
交易
悬赏
活动
打印
|
推荐
|
订阅
|
收藏
标题: JavaScript幻灯片效果
ljjk5
元帅
UID 46706
精华
1
积分 99426
帖子 49691
威望 554
金币 48489
热心 505
阅读权限 100
注册 2007-2-25
状态 离线
#1
使用道具
发表于 2007-5-20 05:55
资料
个人空间
主页
短消息
加为好友
JavaScript幻灯片效果
源程序:
<!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="http://www.83year.net/Files/BeyondPic/2006-12/8/0612801372495171.gif";
for(var i=0;i<13;i++)
{
imgs
=new Image();
imgs
.src="http://www.83year.net/Files/BeyondPic/2006-12/8/0612801372416920.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
.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.83year.net/Files/BeyondPic/2006-12/8/0612801372495171.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"/>
<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
.onload=chk;
imgs
.onerror=chk;//无论图片是否加载成功,都执行指定方法
}
</script>
</body>
</html>
[广告]
免费域名(Free Subdomain)
免费空间(Free hosting)
PR查询(Google Pagerank)
投票
交易
悬赏
活动
控制面板首页
编辑个人资料
积分交易
公众用户组
好友列表
个人空间管理
基本概况
流量统计
客户软件
发帖量记录
论坛排行
主题排行
发帖排行
积分排行
在线时间
管理团队
管理统计
当前时区 GMT+8, 现在时间是 2008-10-7 16:19
信产部ICP备案:
京ICP备05066424号
北京市公安局网监备案:1101050648号
Powered by
Discuz!
5.5.0
TOP
清除 Cookies
-
联系我们
-
网友俱乐部
-
Archiver
-
WAP