JavaScriptは、左右のコントロールでシームレスなスクロールを実装します

著者：Eve Cole 更新時間：2025-06-05 18:32:01

シームレスなスクロールは、プロジェクトでよく使用される特別な効果です。インターネット上には多くのサンプルコードもあります。ここでは、比較的シンプルで実用的なコードをよく互換性のあるコードと共有します。注意深く勉強してください。

HTMLコード：

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

< html>

< head lang = "en">

< meta charset = "utf-8">

<タイトル>シームレスな巻物</ title>

< script src = "js/0010.js"> </</ script>

< link rel = "styleSheet" type = "text/css" href = "css/0010.css"/>

</ head>

< body>

< a href = "javascript：">左を歩く</</ a>

< a href = "javascript：">右に歩く</ a>

< div id = "div1">

< ul>

< li> < img src = "image/1.jpg"> </ li>

< li> < img src = "image/2.jpg"> </ li>

< li> < img src = "image/3.jpg"> </ li>

< li> < img src = "image/4.jpg"> </ li>

</ ul>

</ div>

</ body>

</ html>

CSSコード

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

マージン：0;

パディング：0;

}

＃div1 {

オーバーフロー：隠し;

背景：青;

位置：相対;

幅：600px;

高さ：150px;

マージン：100px Auto;

}

＃div1 ul {

位置：絶対;

左：0px;

上：0px;

リストスタイル：なし;

}

＃div1 ul li {

フロート：左;

}

＃div1 ul li img {

幅：150px;

高さ：150px;

}

JS：コード

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

window.onload = function（）{

var odiv = document.getElementById（ 'div1'）;

var oul = odiv.getelementsbytagname（ 'ul'）[0];

var ali = oul.getelementsbytagname（ 'li'）;

varタイマー= null;

var速度= 2; //スクロール速度と方向を制御します

oul.innerhtml = oul.innerhtml+oul.innerhtml;

oul.style.width = ali [0] .offsetwidth*ali.length+'px';

Timer = setInterval（移動、30）;

odiv.onmouseover = function（）{//暫定的なマウス

ClearInterval（タイマー）;

};

odiv.onmouseout = function（）{//マウスアウトしてスクロールを続けます

Timer = setInterval（移動、30）;

}

document.getElementsByTagname（ 'a'）[0] .onclick = function（）{

速度= -2;

}

document.getElementsByTagname（ 'a'）[1] .onclick = function（）{

速度= 2;

}

function 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';

}

効果は非常に良くありませんか？