首頁 > 開發者 > 網站開發

【JS學習】無縫滾動

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：asc   offset   停止   dtd   seo   org   hid   時間   content   

一、無縫滾動——基礎

效果示範

物體運動基礎

　　讓Div移動起來

　　offsetLeft的作用，可以想到有offsetLeft就會有offsetRight，還會有offsetWight/offsetHeight

　　用定時器讓物體連續移動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>運動基礎</title>

<style>
#div1{
    width:200px;
    height:200px;
    background:red;
    position:absolute;
    left:200px;
    top:150px;
    margin:50px;
    }
</style>
<script>
/*可以使用定時器，每隔一段時間，將left改大一點*/
setInterval(function () {
    var oDiv=document.getElementById(‘div1‘);
    oDiv.style.left=oDiv.offsetLeft+10+‘px‘;/*每隔30毫秒將div左邊距增加10像素，所以div會不斷像右邊移動*/
    },30);
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>

 

二、無縫滾動

（1）效果原理

　　讓ul一直向左移動

（2）賦值li

　　innerHTML和+=

　　修改ul的width

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
div,ul,li,body{
    margin:0;
    padding:0;
    }
    
#div1{
    /*div的寬必須容納4張圖的位置,178乘4*/
    width:712px;
    height:108px;
    margin:100px auto;
    position:relative;
    background:red;
    }
/*給ul設定絕對位置，是因為如果圖片太多，每次都要設定left太麻煩，所以可以直接移動ul*/    
#div1 ul{
    position:absolute;
    left:0;
    top:0;
    }
    
#div1 ul li{
    float:left;
    width:178px;
    height:108px;
    list-style:none;
    }
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
    var aLi=oUl.getElementsByTagName(‘li‘);
    
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//8個li一起滾動
    oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘;//整個ul的寬度，等於1個li的寬度乘li的數量
    
    setInterval(function(){
        oUl.style.left=oUl.offsetLeft-2+‘px‘;
    }, 30);
    }
</script>

</head>

<body>
<div id="div1">
    <ul>
        <li><img src="./img2/1.jpg" /></li>
        <li><img src="./img2/2.jpg" /></li>
        <li><img src="./img2/3.jpg" /></li>
        <li><img src="./img2/4.jpg" /></li>
    </ul>
</div>
</body>
</html>

 

（3）滾動過界後，重設位置

　　判斷過界

向左滾動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
div,ul,li,body{
    margin:0;
    padding:0;
    }
    
#div1{
    /*div的寬必須容納4張圖的位置,178乘4*/
    width:712px;
    height:108px;
    margin:100px auto;
    position:relative;
    background:red;
    overflow:hidden;
    /*把超過div1容器寬度的ul部分隱藏掉，讓大家一直只看到4個*/
    }
/*給ul設定絕對位置，是因為如果圖片太多，每次都要設定left太麻煩，所以可以直接移動ul*/    
#div1 ul{
    position:absolute;
    left:0;
    top:0;
    }
    
#div1 ul li{
    float:left;
    width:178px;
    height:108px;
    list-style:none;
    }
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
    var aLi=oUl.getElementsByTagName(‘li‘);
    
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//8個li一起滾動
    oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘;//整個ul的寬度，等於1個li的寬度乘li的數量
    
    setInterval(function(){
        if(oUl.offsetLeft<-oUl.offsetWidth/2)
        {
            oUl.style.left=‘0‘;
            }
        oUl.style.left=oUl.offsetLeft-2+‘px‘;
    }, 30);
    }
</script>

</head>

<body>
<div id="div1">
    <ul>
        <li><img src="./img2/1.jpg" /></li>
        <li><img src="./img2/2.jpg" /></li>
        <li><img src="./img2/3.jpg" /></li>
        <li><img src="./img2/4.jpg" /></li>
    </ul>
</div>
</body>
</html>

向右滾動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
div,ul,li,body{
    margin:0;
    padding:0;
    }
    
#div1{
    /*div的寬必須容納4張圖的位置,178乘4*/
    width:712px;
    height:108px;
    margin:100px auto;
    position:relative;
    background:red;
    overflow:hidden;
    /*把超過div1容器寬度的ul部分隱藏掉，讓大家一直只看到4個*/
    }
/*給ul設定絕對位置，是因為如果圖片太多，每次都要設定left太麻煩，所以可以直接移動ul*/    
#div1 ul{
    position:absolute;
    left:0;
    top:0;
    }
    
#div1 ul li{
    float:left;
    width:178px;
    height:108px;
    list-style:none;
    }
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
    var aLi=oUl.getElementsByTagName(‘li‘);
    
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//8個li一起滾動
    oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘;//整個ul的寬度，等於1個li的寬度乘li的數量
    
    setInterval(function(){
        //當ul的left剛好大於0的時候，立刻把整體UL向左拉回一半,即ul整體寬度的一半。
        if(oUl.offsetLeft>0)
        {
            oUl.style.left=-oUl.offsetWidth/2+‘px‘;
            }
        oUl.style.left=oUl.offsetLeft+2+‘px‘;
    }, 30);
    }
</script>

</head>

<body>
<div id="div1">
    <ul>
        <li><img src="./img2/1.jpg" /></li>
        <li><img src="./img2/2.jpg" /></li>
        <li><img src="./img2/3.jpg" /></li>
        <li><img src="./img2/4.jpg" /></li>
    </ul>
</div>
</body>
</html>

（4）無縫滾動的擴充，滑鼠移入滾動的圖片後能夠暫停——移入停止定時器和移出開啟定時器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
div,ul,li,body{
    margin:0;
    padding:0;
    }
    
#div1{
    /*div的寬必須容納4張圖的位置,178乘4*/
    width:712px;
    height:108px;
    margin:100px auto;
    position:relative;
    background:red;
    overflow:hidden;
    /*把超過div1容器寬度的ul部分隱藏掉，讓大家一直只看到4個*/
    }
/*給ul設定絕對位置，是因為如果圖片太多，每次都要設定left太麻煩，所以可以直接移動ul*/    
#div1 ul{
    position:absolute;
    left:0;
    top:0;
    }
    
#div1 ul li{
    float:left;
    width:178px;
    height:108px;
    list-style:none;
    }
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
    var aLi=oUl.getElementsByTagName(‘li‘);
    
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//8個li一起滾動
    oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘;//整個ul的寬度，等於1個li的寬度乘li的數量
    
    function move ()
    {
        //當ul的left剛好大於0的時候，立刻把整體UL向左拉回一半,即ul整體寬度的一半。
        if(oUl.offsetLeft>0)
        {
            oUl.style.left=-oUl.offsetWidth/2+‘px‘;
            }
        oUl.style.left=oUl.offsetLeft+2+‘px‘;
    };
    
    var timer=setInterval(move, 30);
    
    /*當滑鼠移入圖片時，圖片停止滾動，可以給整個div添加事件*/
    oDiv.onmouseover=function()
    {
        /*當滑鼠移入時，把定時器關掉*/
        clearInterval(timer);
        };
    /*當滑鼠移出的時候，希望圖片可以繼續移動*/
    oDiv.onmouseout=function()
    {
        timer=setInterval(move, 30);
        /*必須把定時器啟動的動作放在變數timer裡面，當滑鼠移入時，停止變數timer就代錶停止了定時器；當滑鼠移出時，啟動變數timer，就代表重啟了定時器。
        如果直接寫setInterval(move, 30);而不是賦值給timer,那麼在下一次移入滑鼠時，圖片不會停止，移出出滑鼠後圖片還會加速移動。
        因為此時有一個沒被timer賦值的定時器一直在跑，即使滑鼠移入停止的只是被timer賦值的定時器，圖片不會停止移動，因為停止定時器的動作影響不了沒有被timer賦值的定時器。
        反而會使滑鼠移開之後，未被timer賦值的定時器在已經啟動的同時又啟動了一次，導致圖片移動速度加倍*/
        };
    
    };
</script>

</head>

<body>
<div id="div1">
    <ul>
        <li><img src="./img2/1.jpg" /></li>
        <li><img src="./img2/2.jpg" /></li>
        <li><img src="./img2/3.jpg" /></li>
        <li><img src="./img2/4.jpg" /></li>
    </ul>
</div>
</body>
</html>

(5)2個小按鈕改變無縫滾動的方向——修改speed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
div,ul,li,body{
    margin:0;
    padding:0;
    }
    
#div1{
    /*div的寬必須容納4張圖的位置,178乘4*/
    width:712px;
    height:108px;
    margin:100px auto;
    position:relative;
    background:red;
    overflow:hidden;
    /*把超過div1容器寬度的ul部分隱藏掉，讓大家一直只看到4個*/
    }
/*給ul設定絕對位置，是因為如果圖片太多，每次都要設定left太麻煩，所以可以直接移動ul*/    
#div1 ul{
    position:absolute;
    left:0;
    top:0;
    }
    
#div1 ul li{
    float:left;
    width:178px;
    height:108px;
    list-style:none;
    }
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
    var aLi=oUl.getElementsByTagName(‘li‘);
    var speed=-2;
    
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//8個li一起滾動
    oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘;//整個ul的寬度，等於1個li的寬度乘li的數量
    
    function move ()
    {
        if(oUl.offsetLeft<-oUl.offsetWidth/2)
        {
            oUl.style.left=‘0‘;
            }
        
        //當ul的left剛好大於0的時候，立刻把整體UL向左拉回一半,即ul整體寬度的一半。
        if(oUl.offsetLeft>0)
        {
            oUl.style.left=-oUl.offsetWidth/2+‘px‘;
            }
        oUl.style.left=oUl.offsetLeft+speed+‘px‘;
    };
    
    var timer=setInterval(move, 30);
    
    /*當滑鼠移入圖片時，圖片停止滾動，可以給整個div添加事件*/
    oDiv.onmouseover=function()
    {
        /*當滑鼠移入時，把定時器關掉*/
        clearInterval(timer);
        };
    /*當滑鼠移出的時候，希望圖片可以繼續移動*/
    oDiv.onmouseout=function()
    {
        timer=setInterval(move, 30);
        };
        
    document.getElementsByTagName(‘a‘)[0].onclick=function()
    {
        speed=-2;//變數speed為-2就是向左滾動
        };
    document.getElementsByTagName(‘a‘)[1].onclick=function()
    {
        speed=2;//變數speed為2就是向右滾動
        };
    };
</script>

</head>

<body>
<a href="javascripe:;">向左走</a>
<a href="javascripe:;">向右走</a>
<div id="div1">
    <ul>
        <li><img src="./img2/1.jpg" /></li>
        <li><img src="./img2/2.jpg" /></li>
        <li><img src="./img2/3.jpg" /></li>
        <li><img src="./img2/4.jpg" /></li>
    </ul>
</div>
</body>
</html>

【JS學習】無縫滾動

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More