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

JavaScript のよりエレガントなエラー処理方法 async await

ブログ

Centos7 での Mysql5.7.19 の詳細なインストールチュートリアル

ブログ

JS で配列をループする 4 つの方法のまとめ

ブログ

セマフォによるTomcatの異常終了の解決方法

ブログ

HTML で js を使用してローカルシステム時間を取得する

ブログ

無視されたDOCTYPE記述の分析

ブログ

Centos6でgitlabを構築する方法

ブログ

Vue で v-if と v-for を一緒に使用することが推奨されない理由の詳細な説明

ブログ

HTML テーブル境界制御実装コード

ブログ

よくある HTML タグの記述エラー

ブログ

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

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

JavaScript のよりエレガントなエラー処理方法 async await

Centos7 での Mysql5.7.19 の詳細なインストールチュートリアル

JS で配列をループする 4 つの方法のまとめ

セマフォによるTomcatの異常終了の解決方法

HTML で js を使用してローカルシステム時間を取得する

無視されたDOCTYPE記述の分析

Centos6でgitlabを構築する方法

Vue で v-if と v-for を一緒に使用することが推奨されない理由の詳細な説明

HTML テーブル境界制御実装コード

よくある HTML タグの記述エラー

推薦する

シンプルなカルーセル効果を実現するJavaScript

CentOS6.5にpython3.7をインストールする詳細な手順

CSS 命名: BEM、スコープ付き CSS、CSS モジュール、CSS-in-JS の説明

MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法

yumコマンドの使い方

MySQL 中断された接続警告ログの分析

Vueルーティング相対パスジャンプメソッド

Dockerは複数のポートマッピングコマンドを有効にします

JavaScript 事前分析、オブジェクトの詳細

Dockerを使用してGitlabを素早くデプロイする方法

よく使用される入力テキストボックスの内容は自動的に垂直方向に中央揃えされ、クリックするとデフォルトのプロンプトテキストは空になります。

MySQL データアーカイブツール mysql_archiver の詳細な説明

CSS 円形ホローイングの実装（クーポン背景画像）

MYSQL 文字関数を使用してデータをフィルタリングすることに関する質問

MySQL マスタースレーブ同期遅延の原因と解決策