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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: docker に php-fpm サービス/拡張機能/構成をインストールする詳細なチュートリアル
>>: MySQL 8.0.18 圧縮パッケージのインストールと忘れたパスワードのリセット時に遭遇する落とし穴
推薦する
CSS3 の新しいレイアウト: flex の詳細な説明
Flexの基本概念フレックス レイアウト (フレックスはフレキシブル ボックスの略)、エラスティック...
両側にCSS固定レイアウト、中央に適応レイアウトを実装
フローティング、フローティング埋め込み div、配置、フレックスという 4 つの一般的な方法と原則を...
MySQL における一般的な高度な SQL ステートメント
MySQL 高度な SQL ステートメント kgc を使用します。 テーブルlocation(Reg...
Vueカウンターの実装
目次1. カウンターの実装2. 成果を達成する1. カウンターの実装ページにカウンターを実装するだけ...
ドロップダウンボックス選択コンポーネントを実装するためのネイティブ js
この記事の例では、ドロップダウンボックス選択コンポーネントを実装するためのjsの具体的なコードを参考...
CSS3 疑似クラスセレクターの簡単なレビュー
序文CSS がフロントエンド開発の基本的なスキルであるならば、「セレクター」は基礎中の基礎です。これ...
複数の Tomcat を展開して起動し、プロジェクトを移行する方法を 1 つの記事で学習します。
目次tomcatをデプロイする1.ダウンロードして解凍する2. 設定ファイルを変更する移植プロジェク...
モバイル Web アプリ上の画像が鮮明ではなく、非常にぼやけているのはなぜですか?
なぜ？最も簡単に言えば、ピクセルは均等ではないということです。携帯電話に表示される写真はとても繊細に...
MySQL シリーズ 11 ログ
チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...
MySQLストアドプロシージャにおけるカーソル（DECLARE）の原理と使い方の詳細な説明
この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...
JavaScriptを使用して独自のAjax関数を定義する
ネイティブJSによって開始されたネットワークリクエストは、クエリ文字列の形でサーバーに送信されるため...
CSSボックスモデルの紹介を読めば、混乱することはなくなるでしょう
Web デザインでよく耳にするプロパティ名: content、padding、border、marg...
Element+vueを使用して開始時間と終了時間の制限を実装する
この記事の例では、Element+vueを使用して開始と終了の時間制限を実装するための具体的なコード...
ウェブサイトのビジュアルデザイン（画像とテキスト）における情報伝達の役割と方法
現代の Web ビジュアル デザインは、初期の情報の積み重ねから、その後のグラフィックスと抽象化、そ...
アイデア展開Tomcatサービス実装プロセス図
まずプロジェクトの成果物を構成するスタートアップ項目の設定 Tomcatサービスを作成する開始したい...