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 圧縮パッケージのインストールと忘れたパスワードのリセット時に遭遇する落とし穴

Vue スキャフォールディングでのレンダリングを理解する

ブログ

実稼働環境でのNginx高可用性ソリューションの実装プロセスの分析

ブログ

Node.jsサービスDockerコンテナアプリケーション実践のまとめ

ブログ

10分で始めるCSS3アニメーション

ブログ

ソースコードの観点からキープアライブコンポーネントのキャッシュ原理に答える

ブログ

MySQL数千万の大規模データに対する30のSQLクエリ最適化テクニックの詳細な説明

ブログ

IE における条件付きコメントの利点と欠点

ブログ

VMware15 の CentOS7 インストールの詳細なプロセスとよくある問題 (画像とテキスト)

ブログ

CentOS 6.x のインストール時に発生するエラー「ディスク sda に BIOS RAID メタデータが含まれています」の解決方法

ブログ

データベース内のSQL整合性制約ステートメントの分析

ブログ

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

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

Vue スキャフォールディングでのレンダリングを理解する

実稼働環境でのNginx高可用性ソリューションの実装プロセスの分析

Node.jsサービスDockerコンテナアプリケーション実践のまとめ

10分で始めるCSS3アニメーション

ソースコードの観点からキープアライブコンポーネントのキャッシュ原理に答える

MySQL数千万の大規模データに対する30のSQLクエリ最適化テクニックの詳細な説明

IE における条件付きコメントの利点と欠点

VMware15 の CentOS7 インストールの詳細なプロセスとよくある問題 (画像とテキスト)

CentOS 6.x のインストール時に発生するエラー「ディスク sda に BIOS RAID メタデータが含まれています」の解決方法

データベース内のSQL整合性制約ステートメントの分析

推薦する

メッセージボタンに数量バッジを追加する HTML コード

CSS パフォーマンスの最適化 - will-change の使用方法の詳細な説明

MySQL 最適化チュートリアル: 大規模なページングクエリ

Vue3 プロジェクトで WeChat 認証ログインをエレガントに実装する方法

JavaScript を使用して文字列内の最も繰り返しの多い文字を取得する方法

MySQL curdate() 関数の詳細な例

Ubuntu 20.04 に GitLab をインストールして設定する方法

Docker Alpine イメージのタイムゾーン問題に対する完璧な解決策

Vue の get リクエストと post リクエストの違いのまとめ

CSSブレンドモードとSVGを使用して、製品画像の色を動的に変更します。

Docker デプロイメント RabbitMQ コンテナ実装プロセス分析

Dockerコンテナを終了した後も実行を継続する方法

jsオブジェクトの読み取り速度の詳細な例

Windows で mysql 8.0.12 をインストールするための詳細なチュートリアル

IE ラベル LI テキスト折り返し問題について