源程序: /* 渐隐渐现 */ /* 加载图片 */ function chk(){ l)*100/sum)).toString() + % if (document.images){ function adRotator() {} function adRotator.add(p,w,h) /* 播放设置 */ /* 播放 */ /* 下一张 */ /* 上一张 */ /* 间隔时间 */ /* 字符检测 */ /* 暂停 */ /* 添加图片 */ </script> <body> (stops).disabled=” disabled=”True”/> (play).disabled=” disabled=”True”/> http://www.cnblogs.com/PeriFox/archive/2006/08/09/472342.html
<!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();
}
l–;
document.getElementById(“rotatorPlayer”).innerHTML=<img src=+limg[0].src+><br><br> + 照片已加载: + parseInt(((sum-
if (l==0){
adRotator.play();
document.getElementById(stops).disabled=;
document.getElementById(next).disabled=;
}
}
limg[0]=new Image();
limg[0].src=”http://www.knowsky.com/loading.gif”;
for(var i=0;i<13;i++)
{
imgs[i]=new Image();
imgs[i].src=parseInt(i+1)+”.jpg”;
}
}
{
_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=”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[i].src,400,300);
}
</head>
<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=”开始播放” onClick=”adRotator.play();this.disabled=true;document.getElementById
<input type=”button” name=”stops” value=”暂停” onClick=”adRotator.stops();this.disabled=true;document.getElementById
<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[i].onload=chk;
imgs[i].onerror=chk;//无论图片是否加载成功,都执行指定方法
}
</script>
</body>
</html>
javascript幻灯片效果_javascript教程
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » javascript幻灯片效果_javascript教程
相关推荐
-      mootools实例:更改div的透明度动画效果
-      jquery获取当前类在第几个li上面
-      mootools应用:获取复选框中选中的值
-      使用javascript设置下拉框的默认值
-      一款漂亮的黑色风格JS焦点图,使用简单
-      javascript自动获取标题中的关键词
-      用jquery的siblings来实现tab选项卡功能
-      jquery框架操作checkbox控件