参考までに、ネイティブjsでカルーセル効果(シームレススクロール)を実現しています。具体的な内容は以下のとおりです。 効果画像: コード: <!DOCTYPE html> <html lang="ja"> <!-- day07 7-10-14 --> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <script src="./images1/20.animate.js"></script> <スタイル> * { マージン: 0; パディング: 0; } li { リストスタイル: なし; } 。集中 { /*オーバーフロー: 非表示;*/ 位置: 絶対; 上: 100px; 左: 200px; 幅: 721ピクセル; 高さ: 455px; 背景色: 茶色; } .前, 。次 { 表示: なし; 位置: 絶対; 上位: 50%; 上マージン: -15px; 幅: 20px; 高さ: 30px; 背景色: rgba(0, 0, 0, .3); テキスト装飾: なし; 色: #fff; 行の高さ: 30px; テキスト配置: 中央; フォントサイズ: 16px; zインデックス: 2; } .focus ul { /* アニメーション js ファイルの導入には位置決めが必要です */ 位置: 絶対; 幅: 600%; } .focus ul li { フロート: 左; } .前へ { 左: 0; 右上の境界線の半径: 15px; 右下の境界線の半径: 15px; } 。次 { 右: 0; 左上の境界線の半径: 15px; 左下の境界線の半径: 15px; } .プロモナビ{ 位置: 絶対; 下: 10px; 左: 60px; 幅: 200ピクセル; 高さ: 18px; 境界線の半径: 9px; } .promo-nav li { フロート: 左; 幅: 10px; 高さ: 10px; 背景色: #fff; マージン: 2px; 境界線の半径: 50%; } .promo-nav .current { 背景色: オレンジ; } .focus ul li a img { 幅: 721ピクセル; 高さ: 455px; } </スタイル> </head> <本文> <div class="focus"> <ul> <li> <a href="#" ><img src="images1/focu01.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images1/focu02.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images1/focu03.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images1/focu04.jpg" alt=""></a> </li> </ul> <!-- 左ボタン --> <a href="javascript:;" class="prev"><</a> <!-- 右ボタン --> <a href="javascript:;" class="next">></a> <ol class="promo-nav"> </ol> </div> <スクリプト> window.addEventListener('load', 関数() { var focus = document.querySelector('.focus'); var prev = document.querySelector('.prev'); var next = document.querySelector('.next'); focusWidth を focus.offsetWidth に設定します。 //マウスが通過する focus.addEventListener('mouseenter', function() { prev.style.display = 'ブロック'; next.style.display = 'ブロック'; タイマーの間隔をクリアします。 timer = null; // タイマー変数をクリアする }) //マウスがfocus.addEventListener('mouseleave', function() {から離れます prev.style.display = 'なし'; next.style.display = 'なし'; タイマー = setInterval(関数() { 次へをクリックします。 }, 2000) }) //3. 小さな円を動的に生成します。写真の数だけ小さな円を生成します。var ul = focus.querySelector('ul'); var ol = focus.querySelector('.promo-nav'); // コンソール.log(ul.children.length); 4 (var i = 0; i < ul.children.length; i++) の場合 { //liを作成する var li = document.createElement('li'); //カスタム属性を通じて現在の小さな円のインデックス番号を記録します li.setAttribute('index', i); //ol の後に挿入 ol.appendChild(li); //4. マウスで小さな円をクリックして色を変更します(現在のクラスを小さな円に追加し、他の小さな円からこのクラスを削除します)(独自のアイデア) // 小さな円を生成するときにクリックイベントを直接バインドします li.addEventListener('click', function() { (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } this.className = '現在の'; //5. 小さな点をクリックして画像を移動します。ul が移動します。 // ul が移動する距離は、小さい円のインデックス番号に画像の幅を掛けた値です。負の値であることに注意してください。// 小さい li をクリックすると、現在の小さい li のインデックス番号が取得されます。var index = this.getAttribute('index'); //特定のliをクリックすると、liのインデックス番号がnumに渡されます num = インデックス; //特定のliをクリックすると、liのインデックス番号がindexに渡されます 円 = インデックス; コンソールログ(インデックス); アニメーション化(ul, -index * focusWidth, ); }) } //olの最初のliの色を白に設定します。ol.children[0].className = 'current'; //6. 最初の li を複製し、ul の後ろに配置します。var first = ul.children[0].cloneNode(true); ul.appendChild(最初の子); //7. 右側のボタンをクリックして 1 枚の画像をスクロールします。var num = 0; var 円 = 0; var フラグ = true; //右ボタン next.addEventListener('click', function() { if (フラグ) { flag = false; //最初にスロットルを閉じる //5. 最後にコピーした画像に到達すると、ul はすぐに左を 0 に復元します (シームレス スクロール) num == ul.children.length - 1の場合{ ul.style.left = 0; 数値 = 0; } 数値++; アニメーション(ul, -num * focusWidth, 関数() { フラグ = true; }); //8. 右側のボタンをクリックすると、それに応じて小さい円が変化します。小さい円の変化を制御する変数を宣言します。circle++; //circleが4に等しい場合、最後の画像の複製が完了したことを意味し、それを復元します。if (circle == ol.children.length) { 円 = 0; } // // 残っている小さな円のクラス名をクリアします// for (var i = 0; i < ol.children.length; i++) { // ol.children[i].className = ''; // } // // 現在の小さな円の現在のクラス名を残します// ol.children[circle].className = 'current'; 円の変更(); } }) //左ボタン prev.addEventListener('click', function() { if (フラグ) { フラグ = false; //5. 最後にコピーした画像に到達すると、ul はすぐに左を 0 に戻します (シームレス スクロール) 数値 == 0 の場合 num = ul.children.length - 1; ul.style.left = -num * focusWidth + 'px'; } 数値--; アニメーション(ul, -num * focusWidth, 関数() { フラグ = true; }); //8. 右側のボタンをクリックすると、それに応じて小さい円が変化します。小さい円の変化を制御する変数を宣言します。circle--; //circleが0より小さい場合、小さい円は4番目の小さい円に変更されます if (circle < 0) { 円 = ol.children.length - 1; } // 残りの小さな円のクラス名をクリアします // for (var i = 0; i < ol.children.length; i++) { // ol.children[i].className = ''; // } // 現在の小さな円を現在のクラス名のままにします // ol.children[circle].className = 'current'; 円の変更(); } }) 関数circleChange() { //残りの小さな円のクラス名をクリアします for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } //現在の小さな円を現在のクラス名のままにします ol.children[circle].className = 'current'; } //10. スライドショーを自動的に再生する var timer = setInterval(function() { 次へをクリックします。 }, 2000) }) </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CentOS 上での MySQL 5.6 のコンパイルとインストール、および複数の MySQL インスタンスのインストールの詳細な説明
>>: IIS 7.5はURL書き換えモジュールを使用してWebページのリダイレクトを実現します。
MySQL データベースは、特に JAVA プログラマーの間で広く使用されています。クラウド データ...
MySQL スロー クエリ ログは、問題のあるクエリを追跡するのに非常に役立ちます。現在のプログラム...
通常、CSS セレクターは上から下に選択し、親要素を介して子要素を選択します。では、子要素を介して親...
MySQL で concat 関数を使用する方法: CONCAT(文字列1、文字列2、…)戻り値は、...
同僚から、MySQL データ型 DECIMAL(N,M) の N と M の意味を尋ねられました。言...
両側に隙間なし、各列間に隙間あり 幅: 100%; 表示: グリッド; グリッドテンプレート列: r...
JavaScript は多くの素晴らしい機能を備えています。この記事では、作業効率の向上とコードのデ...
目次序文ベジェ曲線の紹介二次ベジェ曲線3次ベジェ曲線ベジェ曲線計算機能フィッティングアルゴリズム付録...
プロジェクトシナリオ: 1. アップロードファイルの制限関数: 1. フロントエンド操作による異常な...
他のデバイスの画像をローカルディレクトリにマウントするなど、サーバー上の静的リソースにアクセスする必...
Linux に触れたばかりの方には、この内容が役に立つかもしれません。Linux にしばらく触れてい...
序文比較的複雑な大規模システムでは、複雑なロジックで処理する必要があるオブジェクトまたはデータ フロ...
この記事では、省と市の簡単な連携を実現するためのJavaScriptの具体的なコードを参考までに紹介...
目次1. 繰り返し宣言1.1 変数1.2 しましょう1.3 定数2. 可変プロモーション2.1 変数...
マスタースレーブ同期 (マスタースレーブレプリケーションとも呼ばれる) は、マスタースレーブデータの...