JavaScript幻灯片效果

幸运的嗨菜

幸运的嗨菜

2016-02-19 15:37

下面是个超简单的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"
titleJavaScript幻灯片效果/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+''brbr'' + ''照片已加载:'' + 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;i13;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);
}

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

/* 暂停 */
function adRotator.stops()
{
   _v = 1;
}

/* 添加图片 */
for (var i=0;iimgs.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"brbr照片已加载:0%/div
brbr
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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

(''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()" /
brbr
input name="image" type="text" size="65"/
/td
  /tr
/table
script language="javascript"
sum=l=imgs.length;
for (var i=0;il;i++){
  imgs[i].onload=chk;
  imgs[i].onerror=chk;//无论图片是否加载成功,都执行指定方法
}
/script
/body
/html

展开更多 50%)
分享

猜你喜欢

JavaScript幻灯片效果

Web开发
JavaScript幻灯片效果

VBscript超强幻灯片效果代码

ASP
VBscript超强幻灯片效果代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Dreamweaver制作网页幻灯片效果

Web开发
Dreamweaver制作网页幻灯片效果

将PowerPoint幻灯片变为黑白效果即幻灯片全部呈现黑白状态

计算机应用技术 powerpoint
将PowerPoint幻灯片变为黑白效果即幻灯片全部呈现黑白状态

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

文字幻灯片

Web开发
文字幻灯片

Dreamweaver制作网页幻灯片效果(1)

Web开发
Dreamweaver制作网页幻灯片效果(1)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

html和body标记应用CSS方法和技巧

html和body标记应用CSS方法和技巧

如何将MAC系统Safari浏览器所有窗口都变为标签页

如何将MAC系统Safari浏览器所有窗口都变为标签页
下拉加载更多内容 ↓