JavaScript Domはカルーセルの原理と例を実装します

カルーセルを作りたい場合、まずその原理を理解する必要があります。画像を右から左にスライドさせるにはどうすればよいでしょうか。
人生における似たようなもの、例えば映画フィルムについて考えてみましょう。
投影領域としてブロックを作成し、ネガティブとしてリストを作成し、それを左に移動してカルーセルの効果を実現できます。

ブロックとリストを作成する

全体的なコンテナーと表示領域として機能するブロックを作成します。

<div id="out">
 <ul id="imgリスト">
 <li><img src="pto/many.jpg" ></li>
 <li><img src="pto/hello.jpg" ></li>
 <li><img src="pto/timg.jpg" ></li>
 <li><img src="pto/zhenjing.jpg"></li>
 </ul>
</div>

現在、写真が縦に並んでおり、ブロックがどこにあるのかわかりません。スタイルを追加してみましょう。

配置をオンにして中央に配置し、ブロックを大きくして背景を追加して位置を決定します (この実験の画像は均一なアスペクト比が 500*431 であるため、div アスペクト比は 520*451 です)

デフォルトのリストスタイルを削除し、リストを水平に表示する

*{
 マージン: 0;
 パディング: 0;
 }
 ＃外{
  幅:520ピクセル;
  高さ:451ピクセル;
  背景色: #00bcd4;
 位置: 相対的;
 マージン: 50px 自動;
 /*オーバーフロー: 非表示;*/
 /*不要な部分を切り取ってコメントアウトするとデバッグしやすくなります*/
 }

 #画像リスト{
  リストスタイル: なし;
  位置: 絶対;
  /* 左: -520px; */
 }
 #imgList li{
  フロート:左;
  マージン: 10px;
}

フローティングを試みた後、lu の幅が小さすぎて収まらないため、写真はまだ 1 列のままです。そのため、拡張する必要がありますが、写真の数が増えると幅も増え続けるため、幅を直接決定することはできません。そのため、JavaScript を使用して幅を解決します。写真が追加されるたびに、幅は 520 px 拡張されます。

window.onload = 関数（）{
 // 動的 ul の長さ var imgList = document.getElementById("imgList");
 var imgArr = document.getElementsByTagName("img");
 imgList.style.width=520*imgArr.length+"px";
 }// オンロード

これで、画像を読み込むフィルムulは、左に-520px移動するたびに画像を変更します。

ナビゲーションバー

カルーセル画像は定期的に変更されますが、顧客が興味を持ったときに画像が変更されている可能性があります。顧客に無関心なまま画像を見返してもらいたい場合は、顧客を失う可能性があります。
したがって、完全なカルーセルには、前のページと次のページを手動で切り替えることができるボタンまたはナビゲーションバーも必要です。
ここではタスクを完了するためにいくつかのハイパーリンクを使用します

<div id="navDiv">
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
</div>

絶対位置指定を有効にすると、ul はドキュメントフローから外れます。コンテンツがないため、ナビゲーションは左上隅のボールに縮小されます。各ハイパーリンクを互いに分離し、スペースを手動で拡張して、下の位置に調整する必要があります。下中央または右側がより良い選択です。
透明度を調整するとナビゲーションの魅力が低下します。結局のところ、画像がテーマです。
拡張を容易にするために、位置調整を解決するために js を使用する必要があります。

 }
 #navDiv{
  位置: 絶対;
  下: 15px;
 }
 #navDiv{
  フロート: 左;
  幅: 15px;
  高さ: 15px;
  背景色: #89ff00;
  マージン: 0 5px;
  不透明度: 0.5;
 }

// ダイナミックナビゲーションセンター var navDiv = document.getElementById("navDiv");
 var out = document.getElementById("out");
 
 // 中央揃え効果を実現するために、ナビゲーションの残りの垂直距離を左右に分割します // 2 で割らないと、右揃えになります // 単位を忘れないでください。 。 navDiv.style.left = (out.clientWidth - navDiv.clientWidth)/2+"px"; を忘れたのは私だけかもしれません。

ナビゲーション機能の改善

15 ピクセルの正方形はユーザーにどのようなフィードバックを与えるべきでしょうか?
現在の画像の位置は、マウスがナビゲーションに移動したときに、クリックできること、ナビゲーションをクリックすると画像が切り替わることをユーザーに伝えるフィードバック情報を提供する必要があります。

#navDiv a:hover{
  背景色: 赤;
  /* マウス移動効果*/
 /* インラインスタイルは優先度が高いため、上書きされて無効にならないように注意してください */
 }

//配置効果 var allA = document.getElementsByTagName("a");
var インデックス = 0;
 allA[インデックス].style.backgroundColor="黒";

 //クリックナビゲーション効果 //ブロックレベルスコープletを使用します。そうでない場合、iは同じ数値になります for(let i=0;i<allA.length;i++){
  allA[i].onclick=関数() {
  imgList.style.left=-520*i+"px";

  // CSS ファイルが有効になるようにインライン スタイルをクリアします allA[index].style.backgroundColor="";
  インデックス=i;
  allA[インデックス].style.backgroundColor="黒";
  }
 }

アニメーション効果

なぜアニメーションを作るのですか? （かっこいいから(≧ω≦*)♪）

カルーセル効果がなければ、それはカルーセルとは呼ばれません。もちろん、アドレスを変更することで完了できます。長い間忙しくしていたのは、まさにこのためではありませんか？アニメーションこそがカルーセルの真髄であることを、最大のタイトルを使ってお伝えします。

主なアイデアは、タイマーを使用して、本来 1 つのステップで完了する効果を複数回完了し、指定された位置に到達したらタイマーをオフにすることです。

注意すべき点

それぞれの移動距離が画像サイズで割られるため、停止位置が不正確（大きい、小さい）になったり、停止しない（停止位置に正確に到達しない）場合があります。小さな誤差が徐々に蓄積されます。
タイマーを開く前に前のタイマーを閉じてください。そうしないと、1つのアニメーションが完了する前に別のタイマーをクリックするとゴースト効果が発生します。

 //クリックナビゲーション効果 for(let i=0;i<allA.length;i++){
  allA[i].onclick=関数() {
  移動(imgList、-520*i、10);
  // imgList.style.left=-520*i+"px";
  //この低レベルの遷移を置き換えます allA[index].style.backgroundColor="";
  インデックス=i;
  allA[インデックス].style.backgroundColor="黒";
  }
 }
 
function move(obj,target,speed){//element; target position; speed//イベントがトリガーされるたびに前のタイマーを閉じます//これが重要なポイントです。この文を削除してクリックすると、差分効果を任意にオフにできます。clearInterval(obj.timer);
  
  var current = parseInt(window.getComputedStyle(obj,null).left);
  //現在の位置を取得します //移動方向を決定します if (target < current) {
  速度 = -速度;
  }
  //タイマーフラグ obj.timer = window.setInterval(function () {
  //m は毎回現在の位置の取得を開始します var oldValue = parseInt(window.getComputedStyle(obj,null).left);
  // 指定された位置に移動して停止します var newValue = oldValue + speed;
  //停止位置を調整します。小さな誤差は時間の経過とともに無限に拡大されます if((speed < 0 && newValue < target)||(speed > 0 && newValue > target)){
   新しい値 = ターゲット;
  }
  imgList.style.left =newValue+"px";
  if(newValue == target){
   タイマー間隔をクリアします。
  }

  },30);

 }

変化（）;
 //自動カルーセル //タイマーを使用して関数change()を呼び出す{
  setInterval(関数() {
  インデックス++;
  インデックス=インデックス% imgArr.length;
  console.log(画像の長さ)
  コンソールログ(インデックス);
  移動(画像リスト、-520*インデックス、20);
  for(let i=0;i<allA.length;i++){
   allA[i].style.backgroundColor="";
   allA[インデックス].style.backgroundColor="黒";
  }
  },3000);
 }

これでカルーセルの基本的な機能は実現できますが、最後の画像が最初の画像に切り替わると、すべての画像が左に引っ張られてしまい、非常に見苦しい状態になります。カルーセルを左に循環させ続けるにはどうすればよいでしょうか。

画像 a と画像 b の 2 つの画像を回転させたいとします。

最後に、図 a のような画像を挿入することができます。2 つの画像の回転が終了したら、3 番目の画像に切り替えて、最初の画像であると誤解させます。3 番目の画像の回転が終了したら、すぐに最初の画像にジャンプして、回転を続けます。これは、人々を欺くトリックです。

カルーセルの場合、フレームワークは言うまでもなく、原理さえ知っていれば十分です。jQuery でカルーセルを完成させるには、10 分の 1 未満の労力しかかかりません。

完全なコード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>タイトル</title>
 <スタイル>
 *{
  マージン: 0;
  パディング: 0;
 }
 ＃外{
  幅:520ピクセル;
  高さ:451ピクセル;
  マージン: 50px 自動;
  背景色: #00bcd4;
  位置: 相対的;
  オーバーフロー: 非表示;
 }

 #画像リスト{
  リストスタイル: なし;
  位置: 絶対;
 }
 #imgList li{
  フロート:左;
  マージン: 10px;
 }
 #navDiv{
  位置: 絶対;
  下: 15px;
 }
 #navDiv{
  フロート: 左;
  幅: 15px;
  高さ: 15px;
  背景色: #89ff00;
  マージン: 0 5px;
  不透明度: 0.5;


 }
 #navDiv a:hover{
  背景色: 赤;
 /* インライン スタイルは優先度が高く、一度トリガーされると無効になります */
 }

 </スタイル>
</head>
<本文>
<div id="out">
 <ul id="imgリスト">
 <li><img src="pto/many.jpg" ></li>
 <li><img src="pto/hello.jpg" ></li>
 <li><img src="pto/timg.jpg" ></li>
 <li><img src="pto/zhenjing.jpg"></li>
 <li><img src="pto/many.jpg" ></li>
 </ul>
 <div id="navDiv">
 <a href="javascript:;" ></a>
 <a href="javascript:;" ></a>
 <a href="javascript:;" ></a>
 <a href="javascript:;" ></a>
 </div>
</div>
<スクリプト>
 window.onload = 関数（）{
 // 動的 ul の長さ var imgList = document.getElementById("imgList");
 var imgArr = document.getElementsByTagName("img");
 imgList.style.width=520*imgArr.length+"px";

 // ダイナミックナビゲーションセンター var navDiv = document.getElementById("navDiv");
 var out = document.getElementById("out");
 navDiv.style.left = (out.clientWidth - navDiv.clientWidth)/2+"px";

 //配置効果 var allA = document.getElementsByTagName("a");
 var インデックス = 0;
 allA[インデックス].style.backgroundColor="黒";

 //クリックナビゲーション効果 for(let i=0;i<allA.length;i++){
  allA[i].onclick=関数() {
  移動(imgList,-520*i,20);
  setA();
  // imgList.style.left=-520*i+"px";
  // allA[インデックス].style.backgroundColor="";
  // インデックス=i;
  // allA[index].style.backgroundColor="black";
  }
 }

 // アニメーション効果関数 move(obj,target,speed,callback){//element; ターゲット位置; 速度; コールバック関数 clearInterval(obj.timer);
  var current = parseInt(window.getComputedStyle(obj,null).left);
  //現在の位置を取得します //移動方向を決定します if (target < current) {
  速度 = -速度;
  }
  //タイマーフラグ obj.timer = window.setInterval(function () {
  //m は毎回位置の取得を開始します var oldValue = parseInt(window.getComputedStyle(obj,null).left);
  // 指定された位置に移動して停止します var newValue = oldValue + speed;
  //停止位置を調整します。小さな誤差は時間の経過とともに無限に拡大されます if((speed < 0 && newValue < target)||(speed > 0 && newValue > target)){
   新しい値 = ターゲット;
  }
  imgList.style.left =newValue+"px";
  if(newValue == target){
   タイマー間隔をクリアします。
   折り返し電話（）;
  }

  },30);

 }
 変化（）;
 //自動カルーセル //タイマーを使用して関数change()を呼び出す{
  setInterval(関数() {
  インデックス++;
  インデックス=インデックス% imgArr.length;
  移動(画像リスト、-520*インデックス、20、関数() {
   if(index>=imgArr.length-1){
   imgList.style.left =0;
   }
   setA();
  });

  },3000);
 }
 関数setA() {
  for(let i=0;i<allA.length;i++){
  allA[i].style.backgroundColor="";
  allA[インデックス].style.backgroundColor="黒";

  }
 }
 }// オンロード
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: