Javascript實現圖片不間斷滾動的代碼
來源：易賢網 閱讀：1056 次 日期：2016-07-19 11:27:43
溫馨提示：易賢網小編為您整理了“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" 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>

以上就是本文的全部內容

更多信息請查看網絡編程
由于各方面情況的不斷調整與變化，易賢網提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢為準！

2026國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業和信息化部備案號：滇ICP備2023014141號-1 云南省教育廳備案號：云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證：（云）人服證字（2023）第0102001523號
云南網警備案專用圖標
聯系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號：hfpxwx
咨詢QQ：1093837350（9:00—18:00）版權所有:易賢網
云南網警報警專用圖標
未满十八18勿进黄网站免费看