欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Javascript实现图片不间断滚动的代码

程序员文章站 2023-11-13 00:01:10
蛮优秀的一段效果代码,可以上下左右滚动,收藏了!!

蛮优秀的一段效果代码,可以上下左右滚动,收藏了!!

<!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" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
   <td width="200"><img src="http://attach.e.iciba.com/attachment/200910/22/4188617_12561994098532.jpg" alt="" width="200" height="150"/></td>
   <td width="200"><img src="http://pica.nipic.com/2008-05-27/2008527145211519_2.jpg" alt="" width="200" height="150"/></td>
   <td width="200"><img src="http://pic4.nipic.com/20090823/383152_215728074589_2.jpg" alt="" width="200" height="150"/></td>
   <td width="200"><img src="http://pic8.nipic.com/20100628/4643449_170245009531_2.jpg" alt="" width="200" height="150"/></td>
   <td width="200"><img src="http://pica.nipic.com/2008-05-30/20085309524648_2.jpg" alt="" width="200" height="150"/></td>
  </tr>
 </table>
</div>
<script type="text/javascript">
scrollobject("sr",50,"right",800,160,"","img")
</script>

</body>
</html>

以上就是本文的全部内容,了解更多javascript的语法,大家可以查看:《javascript 参考教程》、《javascript代码风格指南》,也希望大家多多支持。