3顶

图片播放器特效

稿源：互联网 2022-04-24 16:24:36 点击： 12735 撤稿纠错

很实用的图片播放器脚本，可自定义图片。

以下讨论的是和特效播放器相关的图片播放器特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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='+limg[0].src+'> ' + '照片已加载：' + 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"> 照片已加载：0%</div> <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()" /> <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> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于图片播放器特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200901161108.shtml方便下次再访问哦。

·上一篇： 图片滑动提示效果
·下一篇： 图片自动播放效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

图片播放器特效

文章分类LIST >>返回首页

最新游戏

最新新闻