快捷導(dǎo)航

JavaScript定時(shí)器實(shí)現(xiàn)無(wú)縫滾動(dòng)圖片

更新時(shí)間：2021年05月18日 10:59:28 作者：Cookie_fzx

這篇文章主要為大家詳細(xì)介紹了JavaScript定時(shí)器實(shí)現(xiàn)無(wú)縫滾動(dòng)圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)無(wú)縫滾動(dòng)圖片的具體代碼，供大家參考，具體內(nèi)容如下

文本：

setInterval 開啟間隔型定時(shí)器
clearTimeout 關(guān)閉定時(shí)器
offsetWidth 獲取寬度
offsetLeft 獲取向左偏移量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>無(wú)縫移動(dòng)</title>
    <style>
        *{margin: 0;   padding: 0;}
        #div1{width:520px;  height:170px; margin:20px auto; position: relative;   /* !!!  div1 的位置是相對(duì)的  */
                background: pink;   overflow: hidden}    /* !!!    overflow: hidden    */
        #div1  ul{position: absolute; left:0;  top:0;}      /* !!!  ul 的 position:絕對(duì)的，控制left的值   */
        #div1 ul li{float:left; width:130px; height:170px; 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;    // 相當(dāng)于 4*2 張圖像在移動(dòng)
            oUl.style.width=aLi[0].offsetWidth  *  aLi.length  +  'px';   //  !!!!!!   offsetWidth

            function Move() {
                if(oUl.offsetLeft  < - oUl.offsetWidth/2){      //  移動(dòng)到左邊的一半 就 回來(lái)
                    oUl.style.left='0';
                }
                if(oUl.offsetLeft>0){      // //  移動(dòng)到右邊的一半就回來(lái)
                    oUl.style.left  = - oUl.offsetWidth/2 +'px';
                }
                oUl.style.left=oUl.offsetLeft + speed + 'px';     //  !!!!!!!!  offsetLeft
            }

            var Timer1= setInterval(Move, 30);    //   setInterval    開啟間隔型定時(shí)器
            oDiv.onmouseover=function () {
                clearTimeout(Timer1);
            };
            oDiv.onmouseout=function () {
                Timer1=setInterval(Move, 30);
            };

            document.getElementsByTagName('a')[0].onclick=function () {
                speed=-2;   //  向左的速度
            };
            document.getElementsByTagName('a')[1].onclick=function () {
                speed=2;     // 向右的速度
            };
        };
    </script>

</head>
<body>
<a href="javascript:;" >向左移動(dòng)</a>
<a href="javascript:;" >向右移動(dòng)</a>
    <div id="div1">
        <ul>
            <li><img src="img/aa.jpg"/></li>
            <li><img src="img/bb.jpg"/></li>
            <li><img src="img/cc.jpg"/></li>
            <li><img src="img/dd.jpg"/></li>
        </ul>
    </div>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: