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

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3