効果：マウスを写真に移動してスクロールを停止すると、マウスが自動的にスクロールします
左方向または右方向にスクロールを調整できます
コードコピーは次のとおりです。
<style type = "text/css">
* {
マージン：0;
パディング：0;
}
＃div1 {
オーバーフロー：隠し;
幅：712px;
高さ：108px;
マージン：100px Auto;
位置：相対;
背景：赤;
}
＃div1 ul {
位置：絶対;
左：0;
上：0;
}
＃div1 ul li {
フロート：左;
幅：178px;
高さ：108px;
リストスタイル：なし;
}
</style>
コードコピーは次のとおりです。
<body>
<a href = "javascript：;">左に歩いてください</a>
<a href = "javascript：;">右に歩いてください</a>
<div id = "div1">
<ul>
<li>
<img src = "img/seamless scroll/1.jpg"/>
</li>
<li>
<img src = "img/seamless scroll/2.jpg"/>
</li>
<li>
<img src = "img/seamless scroll/3.jpg"/>
</li>
<li>
<img src = "img/seamless scroll/4.jpg"/>
</li>
</ul>
</div>
</body>
上記は簡単なレイアウトであり、以下はメインのJavaScriptコードです
コードコピーは次のとおりです。
<script type = "text/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';
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';
}
var timer = setInterval（move、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;
};
}
</script>
アイデアを簡単に説明させてください。
まず、ulを設定します。合計で8枚の写真があります。Innerhtml += oul.innerhtml;
li*8の実際の幅にulの幅を計算します
後で追加のコンテンツを非表示にします
注：Oul.OffsetLeftは間違いなく否定的です
だから、判断を下すときに否定的な兆候をお見逃しなく
コードコピーは次のとおりです。
if（oul.offsetLeft <-oul.OffsetWidth / 2）{
oul.style.left = '0';
}
このセクションは、写真が途中でスクロールしていることを意味し、すぐに写真を引き戻します。プログラムが速すぎるため、シームレスなスクロールを見ることはほとんど不可能です。
最後に、可変速度を使用して、左方向と右方向のスクロールを制御します。
上記のコードは最も基本的な機能を実装しており、友人はこれに基づいて改善し続けることができます。