JavaScriptで画像のシームレスなスクロールを実現_javascriptスキル-jsチュートリアル-php.cn

効果: マウスが画像内に移動するとスクロールが停止し、マウスが画像外に移動すると自動的にスクロールします

スクロールを左または右方向に調整できます

コードをコピーします コードは次のとおりです: * { マージン: 0; パディング: 0; } #div1 { オーバーフロー: 非表示; 幅: 712px; 高さ: 108px; マージン: 100px auto; 位置: 相対; 背景: 赤; } #div1 ul { 位置: 絶対; 左: 0; トップ: 0; } #div1 ul li { float: 左; 幅: 178px; 高さ: 108px; リストスタイル: なし; }

コードをコピー コードは次のとおりです:

左に進みます 右に移動 & Lt; img src = "IMG/シームレススクロール /1.jpg"/& gt;

上記は単純なレイアウトであり、以下はメインの Javascript コードです

コードをコピー

コードは次のとおりです: window.onload = function() { var oDiv = document.getElementById("div1"); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var 速度 = 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 timer = setInterval(move, 30); oDiv.onmouseover = function() { clearInterval(タイマー); }; oDiv.onmouseout = function() { timer = setInterval(move, 30); }; document.getElementsByTagName('a')[0].onclick = function() { 速度 = -2; }; document.getElementsByTagName('a')[1].onclick = function() { 速度 = 2; }; } 简单讲下思路：

最初に設置された場所の画像一共有8张 oUl.innerHTML = oUl.innerHTML;

计算ulにおける宽度はliの实际宽度*8

その後、残りのコンテンツを隐藏します

注意 ： oUl.offsetLeft 肯定是负值

所以判断時候不要ハンドル负号漏掉

复制代码 代码如下: if (oUl.offsetLeft oUl.style.left = '0'; }

この段落は、画像が途中までスクロールされたことを意味します。プログラムの実行が速すぎるため、シームレスなスクロールを実現するのがほとんど不可能であるため、すぐに画像を元に戻します

最後に、可変速度を使用して左右方向のスクロールを制御します。

上記のコードは最も基本的な機能のみを実装しており、これに基づいて友人が改良を続けることができます。