シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で、多くの場所を変更する必要があります。また、結合度が高く、プログラムの一部にしか適用できません。そのため、画像構造を変更し、変換ポイントを計算することで、コードをアップグレードできます。 オリジナルのシンプルなスクロールカルーセルコード <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 圧縮版のインストールチュートリアル
目次序文1.nullでない2. ユニーク3. デフォルト4.主キー自動増分主キー5. 外部キー6.チ...
SQL実行ステップの詳細な分析まず、ステートメントが実行される順序を見てみましょう。 (8)選択する...
MySQL はオープンソースの小規模リレーショナル データベース管理システムです。現在、MySQL...
多くのプログラマーは MySQL に精通していると思います。多くの人が count の使い方と、最適...
目次序文時間型を保存するのに文字列を使用しないでくださいMySQL の日付型日時タイムスタンプTIM...
Alibaba ベクターアイコンライブラリにアクセスAlibaba ベクターアイコンライブラリ好き...
ハイパーリンクハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間...
背景ご存知のとおり、JavaEE プロジェクトを開発した後は、そのプロジェクトをサーバーの Tomc...
目次ReactRouterV6 の変更1. <Switch> が <Routes&...
まず、この投稿は Docker 初心者向けです。もちろん、ベテランであれば記事中の分割線以降の操作方...
1 Linuxディストリビューションのバージョンを確認する[root@typecodes ~]# c...
MySQL には次のログがあります。エラーログ: -log-errクエリログ: -logスロークエリ...
パスワード入力後にMySQLデータベースがクラッシュする問題と解決策1 ケースの説明最近、基本的な機...
XML価格照会のクエリデータにはリストが含まれているため、コレクションが必要です <結果マップ...
目次問題の説明シナリオインターフェースリターンフロントエンドメニューの定義vuex のメソッド問題原...