JSは写真の自動再生効果を実現します

この記事では、写真の自動再生効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

JSは写真の自動再生を実現する

1. まずレンダリングを見る

2. 完全なコード

<!DOCTYPE html>
<html>
<ヘッド>
 <スタイル>
  /* スタイルを定義する */
  体{
   マージン: 5% 30%;
  }
  .bannerimage{幅:700px;高さ:400px;フロート:left;背景サイズ:100% 100%;色:#fff;ボックスシャドウ: 0 0 12px 2px #142732;}
  .box{幅:700px;高さ:400px;マージン:0px 自動;オーバーフロー: 非表示;}
        /* ボックスの幅は、画像の数とバナー画像の幅を掛け合わせたものです*/
  .img-g{幅:4900px;高さ:400px;位置:相対;}
  .img-g img{float:left;width:700px;height:400px;}
  .button-g{位置:相対;上:-35px;テキスト配置:中央;}
  .button-g span{display:inline-block;position:relative;z-index:10;width:10px;height:10px;margin:0.5px;border-radius:100%;cursor:pointer;}
 </スタイル>
 
 <script type="text/javascript" src="js/jquery.js"></script>
 
 <script type="text/javascript">
 $(関数() {
     // 自動再生を実装する var p=document.getElementsByClassName('img-g')[0];
  var ボタン = document.querySelectorAll('.button-g span')
  // 再生時間を 3 秒に設定します。window.timer=setInterval(move,3000);
  // カルーセル設定関数move(){
      // バナー画像の幅×画像数 if(parseInt(p.style.left)>-4200){
       // 幅をbannerimage: 700と同じにします
    p.style.left=parseInt(p.style.left)-700+'px'
    p.style.transition='左1秒';
    tog(-Math.round(parseInt(p.style.left)/700))
    （parseInt（p.style.left）<= -4200）の場合{
     setTimeout(関数(){
      トグ(0)
      p.style.left='0px'
      p.style.transition='左0秒';
     },1000)
    }
   }それ以外{
    p.style.left='0px'
    p.style.transition='左0秒';
   }
  }
 
  //小さなドットを設定します for(var i=0;i<button.length;i++){
   // ボタン[i].style.backgroundColor='#eee';
   ボタン[i].onclick=関数(){
    p.style.left=-700*this.getAttribute('data-index')+'px'
    tog(this.getAttribute('データインデックス'))
    クリア間隔(ウィンドウ.タイマー)
    window.timer=setInterval(移動、3000);
   }
  }
  //小さなドット関数tog(index){を設定します
   if(インデックス>5){
    トグ(0);
    戻る;
   }
   for(var i=0;i<button.length;i++){
    ボタン[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
   }
   ボタン[インデックス].style.backgroundColor='rgb(255, 255, 255)';
  }
 
  // マウスオーバーイベント p.onmouseover=function(){
   クリア間隔(ウィンドウ.タイマー)
  }
        // マウス削除イベント p.onmouseout=function(){
   window.timer=setInterval(移動、3000);
  }
 });
 </スクリプト>
</head>
<本文> 
 <div class="バナーイメージ">
  <div クラス = 'ボックス'>
   <div class='img-g' style='left:0px;transition:left 1s;'>
    <img src="images/img_1.jpg" alt="1">
    <img src="/images/img_2.jpg" alt="2">
    <img src="/images/img_3.jpg" alt="3">
    <img src="/images/img_4.jpg" alt="4">
    <img src="/images/img_5.jpg" alt="5">
    <img src="/images/img_6.jpg" alt="6">
    <img src="/images/img_1.jpg" alt="1">
   </div>
   <div class='button-g'>
    <span data-index='0' style="background-color: #eeeeee"></span>
    <span data-index='1' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='2' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='3' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='4' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='5' style="background-color: rgba(255, 255, 255, 0.5)"></span>
   </div>
  </div>
 </div>
</本文>
</html>

3. キーコードの説明

3.1. CSS 設定の注意: img-g の幅は、img の数にバナー画像の幅を掛けた値で、次のようになります。

.img-g{幅:4900px;高さ:400px;位置:相対;}

3.2. カルーセル定数とイベント設定

定数 1 は、次のように、バナー画像の幅に画像の数を掛けた値に設定されます。

(parseInt(p.style.left)>-4200)の場合{}

定数 2 は、バナー画像の幅を一定 (700) に保つために次のように設定されます。

p.style.left=parseInt(p.style.left)-700+'px'

小さなドットの表示設定:

//小さなドットを設定します for(var i=0;i<button.length;i++){
 ボタン[i].style.backgroundColor='#eee';
 ボタン[i].onclick=関数(){
     p.style.left=-700*this.getAttribute('data-index')+'px'
     tog(this.getAttribute('データインデックス'))
     クリア間隔(ウィンドウ.タイマー)
     window.timer=setInterval(移動、3000);
 }
}
// 小さなドットのクリックイベントを設定する function tog(index){
    //ドットの数if(index>5){
  トグ(0);
  戻る;
 }
 for(var i=0;i<button.length;i++){
        // デフォルトのドット表示色 button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
 }
    // 現在のドットボタンの表示色[index].style.backgroundColor='rgb(255, 255, 255)';
}

マウスイベント: マウスを移動すると再生を停止し、マウスを離すと 3 秒後に再生します。

// マウスオーバーイベント p.onmouseover=function(){
 クリア間隔(ウィンドウ.タイマー)
}
// マウス削除イベント p.onmouseout=function(){
 window.timer=setInterval(移動、3000);
}

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

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

js は手動で画像を再生して画像カルーセル効果を実現します。
JSは複数の画像を順番に再生する効果を実現します
javascript コントロール画像再生実装コード
自動かつ制御可能な画像再生を実現するJS特殊効果
JavaScript+html5でフラッシュのような画像のスクロール再生を実現
JavaScript を使用して画像のループと段階的な表示を実現する方法
スライドショー画像を実現する js サンプルコード
JavaScript 制御画像再生コード
クールな画像プレーヤー js フォーカス効果コード
js Sinaの画像再生画像回転効果コード

<<: docker に php-fpm サービス/拡張機能/構成をインストールする詳細なチュートリアル

>>: MySQL 8.0.18 圧縮パッケージのインストールと忘れたパスワードのリセット時に遭遇する落とし穴

ES6のシンボルデータ型について詳しく説明します

ブログ

VMware仮想マシンにdeepin20をインストールする最も完全で詳細なプロセス

ブログ

CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴

ブログ

Nginxがオンになっていると、ポートが占有され、「アドレスは既に使用されています」というメッセージが表示されます。

ブログ

Xtrabackup を使用した MySQL バックアッププロセスの詳細な説明

ブログ

CSS で要素を垂直方向に中央揃えする 7 つの方法

ブログ

MySQL マスタースレーブデータベースが同期されない問題を解決する 2 つの方法

ブログ

win10にUbuntu18デュアルシステムをインストールするとmmx64.efiが見つからないという問題が発生する

ブログ

Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します

ブログ

CSS3 すりガラス効果

ブログ

JSは写真の自動再生効果を実現します

JSは写真の自動再生を実現する

ES6のシンボルデータ型について詳しく説明します

VMware仮想マシンにdeepin20をインストールする最も完全で詳細なプロセス

CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴

Nginxがオンになっていると、ポートが占有され、「アドレスは既に使用されています」というメッセージが表示されます。

Xtrabackup を使用した MySQL バックアッププロセスの詳細な説明

CSS で要素を垂直方向に中央揃えする 7 つの方法

MySQL マスタースレーブデータベースが同期されない問題を解決する 2 つの方法

win10にUbuntu18デュアルシステムをインストールするとmmx64.efiが見つからないという問題が発生する

Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します

CSS3 すりガラス効果

推薦する

JavaScript における 3 つの for ループステートメントの使用の概要 (for、for...in、for...of)

MySQLスローログクエリの詳細な説明

一般的な XHTML タグの使用方法の紹介

MySQL マルチインスタンスインストールブート自動起動サービス設定プロセス

CSS スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)

Web コンポーネントの内部イベントコールバックと問題点の分析

HTML入門チュートリアル HTMLタグ記号をすぐにマスター

Vue ボタンの権限制御の導入

Vue の proto ファイルの関数呼び出しのグラフィカルな説明

DockerコンテナのIPアドレスを表示する方法

CentOS7 で yum ソースをインストールし、コマンド rz と sz をアップロードおよびダウンロードする方法 (画像付き)

SQL実装 LeetCode (176. 2番目に高い給与)

vue3を使用して人間と猫のコミュニケーションアプレットを実装する

Ubuntu 18.04 サーバーのパスワードを忘れたり改ざんされた場合にパスワードをリセットする方法

Web 開発の面接と筆記試験に必須の知識（必読）