js不间断滚动的简单实现,不间断循环滚动效果的实例代码

以上就是小编为大家带来的不间断循环滚动效果的实例代码(必看篇)全部内容了,蛮优秀的一段效果代码,可以上下左右滚动,也希望大家多多支持脚本之家,以上这篇js不间断滚动的简单实现就是小编分享给大家的全部内容了

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

CSS:

<!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="图片 1" width="200" height="150"/></td>
   <td width="200"><img src="http://pica.nipic.com/2008-05-27/2008527145211519_2.jpg" alt="图片 2" width="200" height="150"/></td>
   <td width="200"><img src="http://pic4.nipic.com/20090823/383152_215728074589_2.jpg" alt="图片 3" width="200" height="150"/></td>
   <td width="200"><img src="http://pic8.nipic.com/20100628/4643449_170245009531_2.jpg" alt="图片 4" width="200" height="150"/></td>
   <td width="200"><img src="http://pica.nipic.com/2008-05-30/20085309524648_2.jpg" alt="图片 5" width="200" height="150"/></td>
  </tr>
 </table>
</div>
<script type="text/javascript">
scrollObject("sr",50,"right",800,160,"","img")
</script>

</body>
</html>
ul, li { 
      margin: 0; 
      padding: 0; 
    } 

    #scrollDiv { 
      width: 300px; 
      height: 25px; 
      line-height: 25px; 
      border-bottom: #4c8cd1 1px solid; 
      overflow: hidden; 
    } 

      #scrollDiv li { 
        height: 25px; 
        padding-left: 10px; 
      } 

以上就是小编为大家带来的不间断循环滚动效果的实例代码(必看篇)全部内容了,希望大家多多支持脚本之家~

JS:

您可能感兴趣的文章:

  • 非常不错的不间断循环滚动类
    兼容多浏览器
  • JS不间断向上滚动效果代码
  • 不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
  • js不间断滚动的简单实现
  • JS实现图片的不间断连续滚动的简单实例
<script> 
   function AutoScroll(obj) { 
     $(obj).find("ul:first").animate({ 
       marginTop: "-25px"
     }, 800, function () { 
       $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this); 
     }); 
   } 

   $(document).ready(function () { 
     setInterval('AutoScroll("#scrollDiv")', 3000) 
     setInterval('AutoScroll("#scrollDiv")', 3000) 
   }); 
 </script> 

HTML:

<div id="scrollDiv"> 
        <ul> 
          <li>这是公告标题的第一行</li> 
          <li>这是公告标题的第二行</li> 
          <li>这是公告标题的第三行</li> 
          <li>这是公告标题的第四行</li> 
          <li>这是公告标题的第五行</li> 
          <li>这是公告标题的第六行</li> 
          <li>这是公告标题的第七行</li> 
          <li>这是公告标题的第八行</li> 
        </ul> 

      </div> 

以上这篇js不间断滚动的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 非常不错的不间断循环滚动类
    兼容多浏览器
  • JS不间断向上滚动效果代码
  • 不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
  • JS实现图片的不间断连续滚动的简单实例
  • 不间断循环滚动效果的实例代码(必看篇)