JSシームレスなスクロール効果は、ほぼすべてのWebページで見ることができます。いくつかはプラグインかもしれませんが、実際には、元のJavaScriptを使用することは比較的簡単です。
主なことは、JSロケーションの知識を使用することです。
1.innerhtml：要素のHTMLタグを設定または取得する
2.SCROLLLEFT：オブジェクトの左の境界と、ウィンドウ内の現在表示されているコンテンツの左端の間の距離を設定または取得します
3.OffsetWidth：指定されたラベルの幅を設定または取得する
4.SetInterval（）：定期的に開始する方法を設定します
5.ClearInterval（）;タイマーをクリアします
複製画像：
スニーク：デモ
コードコピーは次のとおりです。
<！doctype html>
<html lang = "en">
<head>
<メタcharset = "utf-8">
<Title> JavaScriptスクロール制作</title>
</head>
<body>
<style>
/*conment*/
*{
マージン：0;
パディング：0;
}
img {max-width：100％;}
。容器{
最大幅：620px;
マージン：0 Auto;
パディングトップ：50px;
}
.text-center {text-align：center;}
.list-inline li {
ディスプレイ：インラインブロック。
}
.hide {display：none;}
HR {
マージン：20px 0;
}
。タグ{
バックグラウンドカラー：#ccc;
パディング：5px 0;
}
.tag li {
パディング：0 10px;
国境左：1px solid #fff;
カーソル：ポインター;
}
.tag li：first-child {
国境左：透明;
}
.tag li.active {
バックグラウンドカラー：#ddd;
}
。スクロール{
位置：相対;
パディング：10px;
マージンボトム：20px;
バックグラウンドカラー：#ddd;
}
。包む{
オーバーフロー：隠し;
}
。コンテンツ{
最小幅：3000px;
高さ：200px;
}
.content ul {
フロート：左;
}
.content ul li {
ディスプレイ：インラインブロック。
最大幅：200px;
}
＃prev、＃next {
幅：50px;
高さ：50px;
マージントップ：-25px;
バックグラウンドカラー：#ccc;
ラインハイト：50px;
テキストアライグ：センター;
カーソル：ポインター;
}
#prev {
位置：絶対;
左：0;
トップ：50％;
Border-Radius：0 25px 25px 0;
}
＃次{
位置：絶対;
右：0;
トップ：50％;
Border-Radius：25px 0 0 25px;
}
</style>
<div>
<h1>画像スクロール生産</h1>
<hr>
<div>
<div id = "wrap">
<div id = "content">
<ul id = "list1">
<li> <img src = "freelance.gif"> </li>
<li> <img src = "button.gif"> </li>
<li> <img src = "load.gif"> </li>
<li> <img src = "straw.gif"> </li>
</ul>
<ul id = "list2">
</ul>
</div>
</div>
<div id = "prev">
前後
</div>
<div id = "next">
次
</div>
</div>
</div>
<スクリプト>
var wrap = document.getElementById（ 'wrap'）;
var list1 = document.getElementById（ 'list1'）;
var list2 = document.getElementById（ 'list2'）;
var prev = document.getElementById（ 'prev'）;
var next = document.getElementById（ 'next'）;
//コンテンツリストのコピーを作成します
list2.innerhtml = list1.innerhtml;
//左に変更します
関数scroll（）{
if（wrap.scrollleft> = list2.offsetwidth）{
wrap.scrollleft = 0;
}
それ以外{
wrap.scrollleft ++;
}
}
Timer = setInterval（scroll、1）;
//マウスの滞在にはclearinterval（）を使用します
wrap.onmouseover = function（）{
ClearInterval（タイマー）;
}
wrap.onmouseout = function（）{
Timer = setInterval（scroll、1）;
}
//左に加速します
関数scroll_l（）{
if（wrap.scrollleft> = list2.offsetwidth）{
wrap.scrollleft = 0;
}
それ以外{
wrap.scrollleft ++;
}
}
//右にスクロールします
関数scroll_r（）{
if（wrap.scrollleft <= 0）{
wrap.scrollleft+= list2.offsetwidth;
}
それ以外{
wrap.scrollleft--;
}
}
prev.onclick = function（）{
ClearInterval（タイマー）;
変更（0）
}
next.onclick = function（）{
ClearInterval（タイマー）;
変更（1）
}
関数変化（r）{
if（r == 0）{
Timer = setInterval（scroll_l、60）;
wrap.onmouseout = function（）{
Timer = setInterval（scroll_l、60）;
}
}
if（r == 1）{
Timer = setInterval（scroll_r、60）;
wrap.onmouseout = function（）{
Timer = setInterval（scroll_r、60）;
}
}
}
</script>
</body>
非常に簡潔で実用的なコードは、プロジェクトのニーズに応じて美化してください。