js幻灯片播放器

稿件来源: Feitec CMS Free   撰稿作者: 太阳光   发表日期: 2008-9-17 8:29:05   阅读次数: 801   查看权限: 游客查看

js幻灯片播放器

var _c = 0;
var _i = 0;
var _v = 0;
var _l = 0;
var _sf = 3000;
var _html = null;
var _image = null;
var _mycars= new Array();
var _w = new Array();
var _h = new Array();

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 src="' + _mycars[_i] + '" width="' + _w[_i] + '" height="' + _h[_i] + '" style="border:1px solid #CCCCCC;">'
     if (_v < 1)
     {
        document.getElementById('image').value = _html + ',' + _i;
        document.getElementById('rotatorPlayer').innerHTML = _html;
        _i = _i + 1;
  document.getElementById('backs').disabled='';
        window.setTimeout("adRotator.loads("+_i+")",_sf);
     }
   }
   else
   {
     _html = '<img src="' + _mycars[_i] + '" width="' + _w[_i] + '" height="' + _h[_i] + '" style="border:1px solid #CCCCCC;">'
  document.getElementById('image').value = _html + ',' + _i;
     document.getElementById('rotatorPlayer').innerHTML = _html;
   }
   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;
}

/* 添加图片,还要加的话注意图片名字就好了,后面400,300是大小 */
adRotator.add("1.jpg",400,300);
adRotator.add("2.jpg",400,300);
adRotator.add("3.jpg",400,300);

把以上文件存为一个JS文件

在下面文件中引用即可

 

<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;
}
button { 
    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;
}
-->
</style>

<script language="javascript" src="test.js"></script>

    
<body onLoad="adRotator.play();">
<div id="rotatorPlayer"></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=''"/>
<input type="button" name="backs" value="上一张" onClick="adRotator.backs();" disabled="true"/>
<input type="button" name="next" value="下一张" onClick="adRotator.next();"/>&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"/>

 

关键词: js,幻灯片,播放器   编辑时间: 2010-3-12 8:49:48

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    1

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程