画像のシームレスなスクロールを実現する JavaScript タイマー

この記事では、画像のシームレスなスクロールを実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

文章：

setIntervalはインターバルタイマーを開始します
clearTimeoutはタイマーを閉じます
offsetWidth 幅を取得
offsetLeft 左オフセットを取得する

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>シームレスなモビリティ</title>
    <スタイル>
        *{マージン: 0; パディング: 0;}
        #div1{width:520px; height:170px; margin:20px auto; position: relative; /* !!! div1の位置は相対的です*/
                背景: ピンク; オーバーフロー: 非表示} /* !!! オーバーフロー: 非表示 */
        #div1 ul{position: absolute; left:0; top:0;} /* !!! ul の位置: absolute、left の値を制御します*/
        #div1 ul li{float:left; width:130px; height:170px; list-style: none}
    </スタイル>
    <スクリプト>
        window.onload = 関数（）{
            var oDiv = document.getElementById('div1');
            var oUl=oDiv.getElementsByTagName('ul')[0];
            var aLi=oUl.getElementsByTagName('li');
            var 速度 = 2;

            oUl.innerHTML+=oUl.innerHTML; // 4*2 画像を移動するのと同等 oUl.style.width=aLi[0].offsetWidth * aLi.length + 'px'; // !!!!!! offsetWidth

            関数Move() {
                if(oUl.offsetLeft <- oUl.offsetWidth/2){ // 左に半分移動してから戻ります oUl.style.left='0';
                }
                if(oUl.offsetLeft>0){ // // 右に半分移動してから戻ります oUl.style.left = - oUl.offsetWidth/2 +'px';
                }
                oUl.style.left=oUl.offsetLeft + speed + 'px'; // !!!!!!!! offsetLeft
            }

            var Timer1 = setInterval(Move, 30); // setIntervalはインターバルタイマーをオンにします oDiv.onmouseover = function () {
                タイマー1のタイムアウトをクリアします。
            };
            oDiv.onmouseout=関数() {
                タイマー1=setInterval(移動、30);
            };

            document.getElementsByTagName('a')[0].onclick=関数 () {
                speed=-2; // 左への速度};
            document.getElementsByTagName('a')[1].onclick=関数 () {
                speed=2; // 右方向の速度};
        };
    </スクリプト>

</head>
<本文>
<a href="javascript:;" >左に移動</a>
<a href="javascript:;" >右に移動</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>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: