シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で、多くの場所を変更する必要があります。また、結合度が高く、プログラムの一部にしか適用できません。そのため、画像構造を変更し、変換ポイントを計算することで、コードをアップグレードできます。 オリジナルのシンプルなスクロールカルーセルコード <html> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <スタイル> *{ マージン: 0; パディング: 0; } 。スクロール{ 位置: 相対的; width: 830px;/*表示幅: 4 つの画像 + 3 つの境界線 = 830*/ 高さ: 130px; 境界線: 10px実線rgb(15, 15, 15); マージン: 100px 自動; オーバーフロー: 非表示; } .スクロール ul{ 位置: 絶対; width: 5000px;/*ulはすべてのliの幅を保存できます*/ 高さ: 130px; 上: 0; 左: 0; } .スクロール ul li{ フロート: 左; 幅: 200ピクセル; 高さ: 130px; 右マージン: 10px; オーバーフロー: 非表示; } </スタイル> </head> <本文> <div id="スクロール" class="スクロール"> <ul id="munit"> <li><img src="../BOM/shuzi/3.png" alt=""></li> <li><img src="../BOM/shuzi/4.png" alt=""></li> <li><img src="../BOM/shuzi/5.png" alt=""></li> <li><img src="../BOM/shuzi/6.png" alt=""></li> <li><img src="../BOM/shuzi/7.png" alt=""></li> <li><img src="../BOM/shuzi/8.png" alt=""></li> <li><img src="../BOM/shuzi/9.png" alt=""></li> <li><img src="../BOM/shuzi/3.png" alt=""></li> <li><img src="../BOM/shuzi/4.png" alt=""></li> <li><img src="../BOM/shuzi/5.png" alt=""></li> <li><img src="../BOM/shuzi/6.png" alt=""></li> <li><img src="../BOM/shuzi/7.png" alt=""></li> <li><img src="../BOM/shuzi/8.png" alt=""></li> <li><img src="../BOM/shuzi/9.png" alt=""></li> </ul> </div> <スクリプト> //要素を取得します var scroll = document.getElementById("scroll"); var munit = document.getElementById("munit"); var li = munit.children; // スクロール var nowLeft = 0; //ul要素の動きの転換点を見つけるvar back = -1470; //画像と境界線はliの幅で、表示される画像は4つなので、転換点は1260です //タイマー var timer = setInterval(run,20); //マウスを移動するとスクロールが停止します scroll.onmouseover = function(){ タイマーの間隔をクリアします。 } // カルーセルを削除します scroll.onmouseout = function(){ タイマー = setInterval(run,20); } //モーション関数 function run(){ nowLeft -= 2; // 折り返し地点に到達したかどうかを判断します。到達している場合は、即座に位置 0 に切り替えます if (nowLeft <= back) { nowLeft = 0; } munit.style.left = nowLeft + "px"; } </スクリプト> </本文> </html> <div id="scroll"> 構造の ul に親 div を追加して、後で画像を追加したり、ul の幅を取得して変換ポイントを計算できるようにします。 CSS書き換え部分: /* ul に親 div を追加して、後で画像を追加した後に ul の幅を取得できるようにします */ .スクロール .インナー{ 位置: 相対的; 幅: 5000ピクセル; } .スクロール ul{ 位置: 絶対; 高さ: 130px; 上: 0; 左: 0; リストスタイル: なし; 本文書き換え部分: <本文> <div id="スクロール" class="スクロール"> <div class="inner"> <ul id="munit"> <li><img src="../BOM/shuzi/3.png" alt=""></li> <li><img src="../BOM/shuzi/4.png" alt=""></li> <li><img src="../BOM/shuzi/5.png" alt=""></li> <li><img src="../BOM/shuzi/6.png" alt=""></li> <li><img src="../BOM/shuzi/7.png" alt=""></li> <li><img src="../BOM/shuzi/8.png" alt=""></li> <li><img src="../BOM/shuzi/9.png" alt=""></li> <li><img src="../BOM/shuzi/10.png" alt=""></li> </ul> </div> </div> JS書き換え部分: <スクリプト> //要素を取得します var scroll = document.getElementById("scroll"); var munit = document.getElementById("munit"); //書き換え部分//1 戻り点の計算はJsによって自動的に計算される必要がある var back = -munit.offsetWidth;//要素は左に移動し、値は負になります//2 対応する画像構造の別のセットを自動的に生成します li munit.innerHTML = munit.innerHTML + munit.innerHTML; // スクロール var nowLeft = 0; //タイマー var timer = setInterval(run,20); //マウスを移動するとスクロールが停止します scroll.onmouseover = function(){ タイマーの間隔をクリアします。 } // カルーセルを削除します scroll.onmouseout = function(){ タイマー = setInterval(run,20); } //モーション関数 function run(){ nowLeft -= 1; // 折り返し地点に到達したかどうかを判断します。到達している場合は、即座に位置 0 に切り替えます if (nowLeft <= back) { nowLeft = 0; } munit.style.left = nowLeft + "px"; } </スクリプト> </本文> </html> この種のコードは結合度が低く、任意の数の li と任意のサイズの画像を追加するのにも適しています。 上記はネイティブ Js で実装されたシンプルなシームレススクロールカルーセルのサンプルコードの詳細です。Js で実装されたシンプルなシームレススクロールカルーセルの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL は SQL ステートメントの最新のレコードをクエリします (最適化)
>>: MySQL 8.0.11 圧縮版のインストールチュートリアル
序文この記事は主に、MYSQL でランキングを実現し、指定ユーザーランキング関数 (並列ランキング関...
目次1. データ型1. MySQL空間データとは何か2. GeoJSONとは3. 空間データ型のフォ...
私たちが構築しようとしていたウェブサイトには、長い文章だけでなく、多数の表も含まれており、表のレイア...
データベースからクエリする必要があるテーブルに数万件のレコードがある場合、すべての結果を一度にクエリ...
インストールパス: /application/mysql-5.7.18 1. 事前準備MySQL 依...
まず、Webフロントエンドエンジニアの価値についてお話ししましょう。現在、Web製品のインタラクショ...
1. Dockerコンテナを起動する以下のコマンドを使用して新しい Docker コンテナを起動しま...
1.ピクセルpx はピクセルの略語で、画面解像度に対する相対的な長さの単位です。 2. えむ参照は親...
mysql idは1から始まり、不連続なidの問題を解決するために自動的に増加します。強迫性障害の私...
例示するフロントエンド開発では、セルの幅を制限し、コンテンツが制限を超える部分に省略記号を表示する必...
以前、ブロガーは VMware 仮想マシンに Ubuntu システムをインストールしました。まだイン...
これは Element UI の読み込みコンポーネントのエフェクトです。かっこいいですね。実装してみ...
Linux システム時間には 2 種類あります。 (1)暦上の時刻。値は、指定された時刻、1970 ...
I. 厳密モードの説明MySQL 5.0 以降の厳密モード (STRICT_TRANS_TABLES...
目次必要とする実装コードデータベース数日前、友人からこれを書くのを手伝ってほしいと頼まれました。ただ...