Javascript 實現圖片無縫滾動_javascript技巧

效果 ： 滑鼠移入圖片 停止滾動， 滑鼠移出自動滾動

可以調整向左或右方向滾動

複製程式碼 程式碼如下:

複製程式碼 程式碼如下:

        向左走
        向右走
       

           

               
• 
                     
                 

               
• 
                     
                 

               
• 
                     
                 

               
• 
                     
                 

           

       

   

以上是一個簡單的佈局，以下是主要的Javascript 程式碼

複製程式碼 程式碼如下:

            window.onload = function() {
                var oDiv = document.getElementById("div1");
                var oUl = oDiv.getElementsByTagName('ul')[0];
                var aLi = oUl.getElementsByTagName('li');
                無功速度 = 2；           
                oUl.innerHTML = oUl.innerHTML;
                oUl.style.width = aLi[0].offsetWidth * aLi.length 'px';
                函數 move() {
                    if (oUl.offsetLeft                         oUl.style.left = '0';
                    }
                    if (oUl.offsetLeft > 0) {
                        oUl.style.left = -oUl.offsetWidth / 2 'px';
                    }
                    oUl.style.left = oUl.offsetLeft 速度 'px';
                }
                var time = setInterval(move, 30);
                oDiv.onmouseover = function() {
                    清除間隔（計時器）；
                };
                oDiv.onmouseout = function() {
                    計時器 = setInterval(move, 30);
                };
                document.getElementsByTagName('a')[0].onclick = function() {
                    速度 = -2;
                };
                document.getElementsByTagName('a')[1].onclick = function() {
                    速度 = 2;
                };
            }
        >腳本

簡單講下思路：

先設定ul裡面的圖片共有8張 oUl.innerHTML = oUl.innerHTML;

在計算ul的寬度為li的實際寬度*8

之後將多餘的內容隱藏

注意： oUl.offsetLeft 一定是負值

所以判斷的時候不要把負號漏掉

複製程式碼程式碼如下：

if (oUl.offsetLeft         oUl.style.left = '0';                  

}

這段表示  圖片滾動到一半了,迅速把圖片拉回來，因為程式執行的太快，所以幾乎看不出來 實現無縫滾動

最後使用 變數 speed 來控制左右方向的滾動。

以上程式碼只是實現了最基本的功能，小夥伴們可以在此基礎上繼續完善。