网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 Javascript实现图片不间断滚动的代码
内容
    这篇文章主要分享一段js图片不间断滚动的代码,蛮优秀的,需要的朋友可以参考下。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>滚动测试</title>
    <script type="text/javascript">
    /**
        * @para obj 目标对象 如:demo,deml1,demo2 中的"demo" 可任意，只要不重复
        *
        * @para speed 滚动速度 越大越慢
        *
        * @para direction 滚动方向 包括:left,right,down,up
        *
        * @para objWidth 总可见区域宽度
        *
        * @para objHeight 总可见区域高度
        * 
        * @para filePath 存放滚动图片的路径 (如果是自动获取文件夹里的图片滚动)
        *
        * @para contentById 对某id为contentById下的内容进行滚动 此滚动与filePath不能共存请注意
        *
        * @para 用法实例 scrollObject("res",50,"up",470,200,"","resource") 对contentById(resource)下内容进行滚动
        *
        * @para 用法实例 scrollObject("res",50,"up",470,200,"d:\\images\\","") 对filePath(images)下内容自动获取并进行滚动,目前只支持ie
        */
        var $ =function(id){return document.getElementById(id)}
        // 滚动
    function scrollObject(obj,speed,direction,objWidth,objHeight,filePath,contentById)
         {
            // 执行初始化
    if(direction=="up"||direction=="down")
                 document.write(UDStructure());
             else
                 document.write(LRStructure());
             var demo = $(obj);
             var demo1 = $(obj+"1");
             var demo2 = $(obj+"2");
             var speed=speed;
             $(contentById).style.display="none"
             demo.style.overflow="hidden";
             demo.style.width = objWidth+"px";
             demo.style.height = objHeight+"px";
             demo.style.margin ="0 auto";
             if(filePath!="")
                demo1.innerHTML=file();
             if(contentById!="")
                demo1.innerHTML=$(contentById).innerHTML;
             demo2.innerHTML=demo1.innerHTML;
             // 左右滚动
    function LRStructure()
             {
                 var _html ="";
                  _html+="<div id='"+obj+"' >";
                  _html+="<table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'>";
                  _html+="<tr>";
                  _html+="<td nowrap='nowrap' id='"+obj+"1' >";
                        // 此处是放要滚动的内容
                  _html+="</td>";
                  _html+="<td nowrap='nowrap' id='"+obj+"2' ></td>";
                  _html+="</tr>";
                  _html+="</table>";
                  _html+="</div>";
                return _html;
             }
             // 上下滚动的结构
    function UDStructure()
             {
                 var _html ="";
                  _html+="<div id="+obj+" >";
                  _html+="<table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'>";
                  _html+="<tr>";
                  _html+="<td id='"+obj+"1' >";
                      // 此处是放要滚动的内容
                  _html+="</td>";
                  _html+="</tr>";
                  _html+="<tr>";
                  _html+="<td id='"+obj+"2' ></td>";
                  _html+="</tr>";
                  _html+="</table>";
                  _html+="</div>";
                return _html;
             }
             // 取得文件夹下的图片
    function file()
             {
                var tbsource = filePath;//本地文件夹路径
                filePath = filePath.toString();
                if (filePath=="")
                  return"";
                var imgList ="";
                var objFSO =new ActiveXObject('Scripting.FileSystemObject');
                // 文件夹是否存在
    if(!objFSO.FolderExists(tbsource))
                {
                    alert("<"+tbsource+">该文件夹路径不存在，或者路径不能含文件名！");
                    objFSO =null;
                    return;
                }
                var objFolder = objFSO.GetFolder(tbsource);
                var colFiles =new Enumerator(objFolder.Files);
                var re_inf1 =/\.jpg$/;  //验证文件夹文件是否jpg文件
                 for (;!colFiles.atEnd();colFiles.moveNext()) //读取文件夹下文件
                 {
                    var objFile = colFiles.item();
                   
                    if(re_inf1.test(objFile.Name.toLowerCase()))
                    {
                      imgList +="<img src="+filePath+"/"+objFile.Name+">";
                    }
                 }
                return imgList;
             }
             // 向左滚
    function left()
             {
               if(demo2.offsetWidth-demo.scrollLeft<=0)
               {
                 demo.scrollLeft-=demo1.offsetWidth;
               }
               else
               {
                 demo.scrollLeft++;
               }
             }
             // 向右滚
    function right()
             {
                if(demo.scrollLeft<=0)
                {
                  demo.scrollLeft+=demo2.offsetWidth;
                }
                else
                {
                  demo.scrollLeft--
                }
             }
             // 向下滚
    function down()
             {
                if(demo1.offsetTop-demo.scrollTop>=0)
                {
                  demo.scrollTop+=demo2.offsetHeight;
                }
                else
                {
                  demo.scrollTop--
                }
             }
             // 向上滚
    function up()
             {
                if(demo2.offsetTop-demo.scrollTop<=0)
                {
                  demo.scrollTop-=demo1.offsetHeight;
                }
                else
                {
                  demo.scrollTop++
                }
             }
             // 切换方向
    function swichDirection()
             {
                switch(direction)
                {
                  case"left":
                    return left();
                    break;
                  case"right":
                    return right();
                    break;
                  case"up":
                    return up();
                    break;
                  default:
                    return down();
                }
             } 
             // 重复执行
    var myMarquee=setInterval(swichDirection,speed);
             // 鼠标悬停
             demo.onmouseover=function() {clearInterval(myMarquee);}
             // 重新开始滚动
             demo.onmouseout=function() { myMarquee=setInterval(swichDirection,speed);}
        }
    </script>
    </head>
    <body>
    <div id="img">
     <table width="1000" cellpadding="5" cellspacing="0">
      <tr>
       <td width="200"><img src="http://attach.e.iciba.com/attachment/200910/22/4188617_12561994098532.jpg" width="200" height="150"/></td>
       <td width="200"><img src="/uploads/202504/02/2008527145211519_23057.jpg" width="200" height="150"/></td>
       <td width="200"><img src="/uploads/202504/02/383152_215728074589_23057.jpg" width="200" height="150"/></td>
       <td width="200"><img src="/uploads/202504/02/4643449_170245009531_23057.jpg" width="200" height="150"/></td>
       <td width="200"><img src="/uploads/202504/02/20085309524648_23057.jpg" width="200" height="150"/></td>
      </tr>
     </table>
    </div>
    <script type="text/javascript">
    scrollObject("sr",50,"right",800,160,"","img")
    </script>
    </body>
    </html>
    以上就是本文的全部内容
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/16 3:22:20