js幻灯片播放器

最新推荐文章于 2021-03-08 23:06:26 发布

pisDad

最新推荐文章于 2021-03-08 23:06:26 发布

阅读量320

点赞数

分类专栏： ASP.NET

本文链接：https://blog.csdn.net/zijiaxing/article/details/48520527

版权

ASP.NET 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前台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" />
<title>轻量封装图片轮动</title>
<style type="text/css">

</style>
<script language="javascript" src="ui/js/adRotator.js">
</script>

</head>
<BODY οnlοad="adRotator.loads()">
<div id="rotatorPlayer"></div>

<input name="image" type="text" size="65"/>
<script language="javascript">
        /* 添加图片,还要加的话注意图片名字就好了,后面400,300是大小 */
        adRotator.add("files/ArticleImg/$2008722489.jpg",400,300);
        adRotator.add("files/ArticleImg/004761.jpg",400,300);
        adRotator.add("files/ArticleImg/008060.jpg",400,300);
</script>
</BODY>

</html>

adRotator.js文件：

var _c = 0;
var _i = 0;
var _v = 1;
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()
{
    _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 < _mycars.length && _l < 1)
   {
     if (_v < 1)
     {
        _i = _i + 1;
        document.getElementById('stops').disabled='';
        document.getElementById('play').disabled='True';
       document.getElementById('backs').disabled='True';
       document.getElementById('next').disabled='True';
        window.setTimeout("adRotator.loads("+_i+")",_sf);
     }
     else
     {
        document.getElementById('stops').disabled='True';
        document.getElementById('play').disabled='';
       document.getElementById('backs').disabled='';
       document.getElementById('next').disabled='';
     }
   }
//   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 = _i-1;
       _l=1;
       _v = 1;
   }
}

/* 播放 */
function adRotator.play()
{
   _v = 0;
   _l = 0;
   _i=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='';
   document.getElementById('backs').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;
   if (_i >= _mycars.length)
   {
       document.getElementById('play').disabled='';
       document.getElementById('stops').disabled='True';
       document.getElementById('backs').disabled='';
   }
   else if(_i-1 <= 0)
   {
   document.getElementById('play').disabled='';
   document.getElementById('stops').disabled='True';
   document.getElementById('next').disabled='';

   }
   else
   {
       document.getElementById('play').disabled='';
       document.getElementById('stops').disabled='True';
       document.getElementById('next').disabled='';
       document.getElementById('backs').disabled='';
   }
   _i=_i-1;
}

pisDad

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js幻灯片播放器

前台HTML如下:http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">轻量封装图片轮动body { font-size:12px;}input { border-right: #7b9ebd 1px solid;padding-right: 2px;border-t
复制链接

扫一扫