この記事では、JavaScriptカルーセルの実装方法を参考までに紹介します。具体的な内容は次のとおりです。 エフェクトのスクリーンショット:注: divコンテナのサイズと画像パスは自分で設定でき、 img タグとaタグを追加した後でブラウザが適応します。 写真を保存するための画像フォルダを作成する HTMLテキストを書く <本文> //画像パスは自分で変更できます <div id="outer"> <ul id="画像リスト"> <li><img src="image/8.jpg" alt=""></li> <li><img src="image/6.jpg" alt=""></li> <li><img src="image/7.jpg" alt=""></li> <li><img src="image/6.jpg" alt=""></li> <li><img src="image/8.jpg" alt=""></li> <li><img src="image/7.jpg" alt=""></li> <li><img src="image/6.jpg" alt=""></li> <li><img src="image/8.jpg" alt=""></li> </ul> <div id="nav"> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> </div> </div> </本文> CSSスタイルを追加する <スタイル> * { マージン: 0px; パディング: 0px; } /* 外枠コンテナ */ #外側{ 幅: 1555ピクセル; 高さ: 600px; 背景色: #bfa; マージン: 100px 自動; 位置: 相対的; /* 隠れる */ オーバーフロー: 非表示; } /* 画像のリスト */ #画像リスト { /* フレックスボックスレイアウト */ ディスプレイ: フレックス; リストスタイル: なし; 位置: 相対的; /* レイアウト方向 */ /* flex-direct5on: 行; */ /*画像のピクセルを1552ピクセル移動します*/ /* 右: 1552px; */ } #画像リスト li { マージン: 10px 10px; } /* ナビゲーションポイント */ #ナビ{ ディスプレイ: フレックス; リストスタイル: なし; 位置: 絶対; 下: 50px; /* 1555/2 - 6*(20+25)/2 */ /* 左: 642px; */ } #nav { 幅: 25px; 高さ: 25px; マージン: 0px 10px; 背景色: rgb(223, 129, 52); 境界線の半径: 5px; } /* マウス移動効果*/ #nav a:hover { 背景色: rgb(215, 107, 224); } </スタイル> JavaScript による機能の実装 <script type="text/javascript"> window.onload = 関数(){ // 外側のフレームのプロパティを取得します。var outer = document.getElementById("outer"); // imglist 属性を取得します var imglist = document.getElementById("imglist"); // img 属性を取得します var imgArr = document.getElementsByTagName("img"); // a 属性を取得します var allA = document.getElementsByTagName('a'); //ナビゲーション ポイントを取得します var nav = document.getElementById("nav"); //ナビゲーション ポイントを中央に設定します。nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + "px"; //デフォルトの表示インデックス var index = 0; allA[インデックス].style.backgroundColor = "rgb(215, 107, 224)"; // ナビゲーションポイントタイマーを切り替える var timer = setInterval(function () { //ループ表示 index = (++index) % allA.length; //ナビゲーションポイントの背景色を設定します。 allA[index].style.backgroundColor = "rgb(215, 107, 224)"; SetA(); //写真を自動的に切り替えます//写真を変更すると、1 つの写真が 1552 ピクセル左に移動します imglist.style.transition = "右 1.5 秒" imglist.style.right = (インデックス * 1552) + "px"; }, 1800); //ハイパーリンクをクリックすると画像が表示されます for (var i = 0; i < allA.length; i++) { //各ハイパーリンクにインデックスを追加します。allA[i].index = i; //各ハイパーリンクにクリック応答関数をバインドする allA[i].onclick = function () { imgIndex = this.index; //ナビゲーション ポイントの現在の位置をオーバーライドします。index = imgIndex; SetA(); //画像を変更し、画像のピクセルを 1552 ピクセル左に移動する imglist.style.transition = "右 0.85 秒" imglist.style.right = (imgIndex * 1552) + "px"; //選択したタグを変更します allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)"; }; } //関数のスタイルをクリアする SetA() { (var i = 0; i < allA.length; i++) の場合 { allA[i].style.backgroundColor = ""; } //現在のナビゲーションに allA[index].style.backgroundColor = "rgb(215, 107, 224)" を設定します。 } }; </スクリプト> 完全なコード<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>カルーセル画像</title> <スタイル> * { マージン: 0px; パディング: 0px; } /* 外枠コンテナ */ #外側{ 幅: 1555ピクセル; 高さ: 600px; 背景色: #bfa; マージン: 100px 自動; 位置: 相対的; /* 隠れる */ オーバーフロー: 非表示; } /* 画像のリスト */ #画像リスト { /* フレックスボックスレイアウト */ ディスプレイ: フレックス; リストスタイル: なし; 位置: 相対的; /* レイアウト方向 */ /* flex-direct5on: 行; */ /*画像のピクセルを1552ピクセル移動します*/ /* 右: 1552px; */ } #画像リスト li { マージン: 10px 10px; } /* ナビゲーションポイント */ #ナビ{ ディスプレイ: フレックス; リストスタイル: なし; 位置: 絶対; 下: 50px; /* 1555/2 - 6*(20+25)/2 */ /* 左: 642px; */ } #nav { 幅: 25px; 高さ: 25px; マージン: 0px 10px; 背景色: rgb(223, 129, 52); 境界線の半径: 5px; } /* マウス移動効果*/ #nav a:hover { 背景色: rgb(215, 107, 224); } </スタイル> <script type="text/javascript"> window.onload = 関数(){ // 外側のフレームのプロパティを取得します。var outer = document.getElementById("outer"); // imglist 属性を取得します var imglist = document.getElementById("imglist"); // img 属性を取得します var imgArr = document.getElementsByTagName("img"); // a 属性を取得します var allA = document.getElementsByTagName('a'); //ナビゲーション ポイントを取得します var nav = document.getElementById("nav"); //ナビゲーション ポイントを中央に設定します。nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + "px"; //デフォルトの表示インデックス var index = 0; allA[インデックス].style.backgroundColor = "rgb(215, 107, 224)"; // ナビゲーションポイントタイマーを切り替える var timer = setInterval(function () { インデックス = (++index) % allA.length; //ナビゲーションポイントの背景色を設定します。 allA[index].style.backgroundColor = "rgb(215, 107, 224)"; SetA(); //写真を自動的に切り替えます//写真を変更すると、1 つの写真が 1552 ピクセル左に移動します imglist.style.transition = "右 1.5 秒" imglist.style.right = (インデックス * 1552) + "px"; //ループ表示}, 1800); //ハイパーリンクをクリックすると画像が表示されます for (var i = 0; i < allA.length; i++) { //各ハイパーリンクにインデックスを追加します。allA[i].index = i; //各ハイパーリンクにクリック応答関数をバインドする allA[i].onclick = function () { imgIndex = this.index; //ナビゲーション ポイントの現在の位置をオーバーライドします。index = imgIndex; SetA(); //画像を変更し、画像のピクセルを 1552 ピクセル左に移動する imglist.style.transition = "右 0.85 秒" imglist.style.right = (imgIndex * 1552) + "px"; //選択したタグを変更します allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)"; }; } //関数のスタイルをクリアする SetA() { (var i = 0; i < allA.length; i++) の場合 { allA[i].style.backgroundColor = ""; } allA[インデックス].style.backgroundColor = "rgb(215, 107, 224)"; } }; </スクリプト> </head> <本文> <div id="外側"> <ul id="画像リスト"> <li><img src="image/8.jpg" alt=""></li> <li><img src="image/6.jpg" alt=""></li> <li><img src="image/7.jpg" alt=""></li> <li><img src="image/6.jpg" alt=""></li> <li><img src="image/8.jpg" alt=""></li> <li><img src="image/7.jpg" alt=""></li> <li><img src="image/6.jpg" alt=""></li> <li><img src="image/8.jpg" alt=""></li> </ul> <div id="nav"> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> <a href="JavaScript:;"></a> </div> </div> </本文> </html> 関数の使用法:タイマーを作成します。 setInterval(関数() {},30) 丸い境界線を設定します。 境界線の半径: 5px;
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
まずコードファイルの構造を見てみましょう。エントリファイル (index1.js) の内容: ...
序文最近CocosCreatorを学びたいと思ったので、エディターをダウンロードして起動しました。誰...
1. redis で使用すると Netty の起動競合が発生するため、***Application ...
3日間さまざまな困難に遭遇した後、ようやくこの機能を実現しました。正常に実装できる方法を見つける前に...
nginx ログは filebeat によって収集され、logstash に渡され、logstash...
日常業務でファイルをダウンロードする一般的な方法は 2 つあります。 1 つ目は、サーバーのファイル...
React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...
1. MySQL での or 構文の使用、および MySQL 構文で or を使用する際の注意点。 ...
序文Intel のハイパースレッディング テクノロジーにより、1 つの物理コア上で 2 つのスレッド...
目次環境条件エラーが発生しました回避策1. mysql dockerにログインする2. ルートパスワ...
Lottie は、Airbnb が開発した iOS、Android、React Native 向けの...
Dockerコンテナを使用する場合は、nsenterツールを使用する方が便利です。システムにない場合...
1. ランナーコンテナを作成する mk@mk-pc:~/Desktop$ docker run -d...
(Win7 システム) VMware 仮想マシンのインストール チュートリアルVMware は仮想マ...
1. package.jsonに追加する "メイン": "electr...