首頁 > web前端 > js教程 > Javascript 實現圖片無縫滾動_javascript技巧

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

WBOY
發布: 2016-05-16 16:25:42
原創
1096 人瀏覽過

效果 : 滑鼠移入圖片 停止滾動, 滑鼠移出自動滾動

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

複製程式碼 程式碼如下:


複製程式碼 程式碼如下:


        向左走
        向右走
       

           

                   

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

  •                

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

  •                

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

  •                

  •                     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 來控制左右方向的滾動。

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板