今日は、ネイティブ JS で実装されたブリージング カルーセルを紹介します。効果は次のとおりです。 以下はコード実装です。コピーして貼り付けていただいて結構です。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <title>ブリージングカルーセルを実装するためのネイティブ JS</title> <スタイル> ul { マージン: 0; 左パディング: 0; } li { リストスタイル: なし; } 画像 { 境界線: なし; } #主要 { 幅: 280ピクセル; 高さ: 330ピクセル; オーバーフロー: 非表示; 位置: 相対的; マージン: 20px 自動 0 自動; } #メインul { 位置: 絶対; 左: 0; } #メイン ul li { 幅: 280ピクセル; 高さ: 330ピクセル; フロート: 左; 位置: 絶対; フィルター:アルファ(不透明度=0); 不透明度: 0; } #ボタン{ 行の高さ: 14px; テキスト配置: 中央; 背景: #eeeeee; 幅: 280ピクセル; マージン: 10px 自動 0 自動; ディスプレイ: フレックス; flex-direction: 行; コンテンツの両端揃え: スペースを空ける; アイテムの位置を中央揃えにします。 } #ボタン{ 表示: インラインブロック; 幅: 14px; 高さ: 14px; テキスト装飾: なし; 行の高さ: 12px; テキスト配置: 中央; 境界線の半径: 7px; } #btn a.index { 背景色: #ccc; } #btn a.active { 背景色: 赤; } </スタイル> <script type="text/javascript" src="js/move.js"></script> <スクリプト> window.onload = 関数(){ var oMain = document.getElementById('main'); var oUl = oMain.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var oBtn = document.getElementById('btn'); var aA = oBtn.getElementsByTagName('a'); var iNow = 1; var iNow2 = 1; var bBtn = true; var 数値 = 3; var タイマー = null; oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px'; aA[0].onclick = 関数(){ もし(bBtn){ タイマーの間隔をクリアします。 タイマー = setInterval(autoPlay, 3000); (var i = 0; i < aLi.length; i++) の場合 { aLi[i].style.position = '相対'; aLi[i].style.filter = 'alpha(不透明度=100)'; aLi[i].style.opacity = 1; } oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px'; iNow == 1の場合{ iNow = aLi.length; aLi[aLi.length - 1].style.position = '相対'; aLi[aLi.length - 1].style.left = -aLi.length * aLi[0].offsetWidth + 'px'; } それ以外 { 今--; } iNow2--; 実行(); bBtn = 偽; } }; aA[aA.length - 1].onclick = 関数(){ もし(bBtn){ タイマーの間隔をクリアします。 タイマー = setInterval(autoPlay, 3000); (var i = 0; i < aLi.length; i++) の場合 { aLi[i].style.position = '相対'; aLi[i].style.filter = 'alpha(不透明度=100)'; aLi[i].style.opacity = 1; } oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px'; iNow == aLi.lengthの場合{ iNow = 1; aLi[0].style.position = '相対'; aLi[0].style.left = aLi.length * aLi[0].offsetWidth + 'px'; } それ以外 { iNow++; } iNow2++; 実行(); bBtn = 偽; } }; (var i = 1; i < aA.length - 1; i++) の場合 { aA[i].インデックス = i; aA[i].onclick = 関数(){ タイマーの間隔をクリアします。 タイマー = setInterval(autoPlay, 3000); インデックス インデックス 表示する(); }; }; 関数toRun() { (var i = 1; i < aA.length - 1; i++) の場合 { aA[i].className = 'インデックス'; } aA[iNow].className = 'アクティブ'; startMove(oUl, { 左: -(iNow2 - 1) * aLi[0].offsetWidth }, 関数 () { iNow == 1の場合{ aLi[0].style.position = '相対'; aLi[0].style.left = 0; oUl.style.left = 0; 1 を返します。 } そうでない場合 (iNow == aLi.length) { aLi[aLi.length - 1].style.position = '相対'; aLi[aLi.length - 1].style.left = 0; oUl.style.left = -(aLi.length - 1) * aLi[0].offsetWidth + 'px'; iNow2 = aLi.長さ; } (var i = 0; i < aLi.length; i++) の場合 { aLi[i].style.position = '絶対'; aLi[i].style.filter = 'alpha(不透明度=0)'; aLi[i].style.opacity = 0; } oUl.style.left = 0; aLi[iNow2 - 1].style.zIndex = num++; aLi[iNow2 - 1].style.filter = 'alpha(不透明度=100)'; aLi[iNow2 - 1].style.opacity = 1; bBtn = true; }); }; 関数toShow() { (var i = 1; i < aA.length - 1; i++) の場合 { aA[i].className = 'インデックス'; } (var i = 0; i < aLi.length; i++) の場合 { startMove(aLi[i], { 不透明度: 0 }); } aA[iNow].className = 'アクティブ'; startMove(aLi[iNow - 1], { 不透明度: 100 }, 関数() { aLi[iNow - 1].style.zIndex = num++; }); } タイマー = setInterval(autoPlay, 3000); 関数autoPlay() { iNow == aLi.lengthの場合{ iNow = 1; 1 を返します。 } それ以外 { iNow++; iNow2++; } 表示する(); } }; </スクリプト> </head> <本文> <div id="メイン"> <ul> <li style="z-index:2; filter:alpha(opacity=100); opacity:1;"> <あ> <img src="images/0.jpg" /> </a> </li> <li> <あ> <img src="images/1.jpg" /> </a> </li> <li> <あ> <img src="images/2.jpg" /> </a> </li> <li> <あ> <img src="images/3.jpg" /> </a> </li> </ul> </div> <div id="btn"> <a class="prev" href="javascript:;"> <a class="active" href="javascript:;"> </a> <a class="index" href="javascript:;"></a> <a class="index" href="javascript:;"></a> <a class="index" href="javascript:;"></a> <a class="next" href="javascript:;">></a> </div> </本文> </html> 以下は、上記のコードで紹介した move.js の最も重要な移動関数のコードです。 関数 startMove(obj, json, fnEnd) { タイマー間隔をクリアします。 obj.timer = setInterval(関数() { doMove(obj、json、fnEnd); }, 30); } 関数doMove(obj, json, fnEnd) { var iCur = 0; var 属性 = null; var bStop = true; for (json 内の属性) { 属性 == '不透明度' の場合 { (parseInt(100 * getStyle(obj、attr))== 0)の場合{ iCur = parseInt(100 * getStyle(obj, attr)); } それ以外 { iCur = parseInt(100 * getStyle(obj, attr)) || 100; } } それ以外 { iCur = parseInt(getStyle(obj, attr)) || 0; } var iSpeed = (json[attr] - iCur) / 5; iSpeed = (iSpeed > 0) ? Math.ceil(iSpeed) : Math.floor(iSpeed); json[attr] が iCur の場合 bStop = false; } 属性 == '不透明度' の場合 { obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')'; obj.style.opacity = (iCur + iSpeed) / 100; } それ以外 { obj.style[attr] = iCur + iSpeed + 'px'; } } if (bStop) { タイマー間隔をクリアします。 if (fnEnd) { fnEnd.call(obj); } } } 関数stopMove(obj) { タイマー間隔をクリアします。 } 関数 getStyle(obj, attr) { (obj.currentStyle)の場合{ obj.currentStyle[attr]を返します。 } それ以外 { getComputedStyle(obj)[attr]を返します。 } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker プラグインを使用して IDEA のクラウド サーバーにプロジェクトをリモートでデプロイする方法
>>: MySQL Null は 5 つの問題を引き起こす可能性があります (すべて致命的)
<br /> テキスト、シンボル、リンクの 3 つの側面に焦点を当て、主に中国語で、私の...
この記事は、「1 分でインデックス作成スキルを学ぶ」という宿題から生まれました。注文ビジネス テーブ...
目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...
HTML部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> &l...
Web ページの制作では、要素の表示と非表示は非常に一般的な要件です。この記事では、要素を表示したり...
フレーム構造タグ <frameset></frameset>フレームを使用す...
まず、データベース パーティショニングとは何でしょうか?以前、MySQL のテーブル パーティショニ...
このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...
1. 最初の方法は、ローカルのTomcatを起動してJSPを表示することです。 tomcatのweb...
MySQL での SQL モードの表示と設定MySQL はさまざまなモードで実行でき、さまざまなシナ...
問題の説明: 非同期リクエストの数が不確定な場合、数百の http リクエストが瞬時に発生したときに...
目次1. 正規表現の作成2. 使用モード2.1 シンプルモードの使用2.2 特殊文字の使用3. 応用...
UPD 2020.2.26 現在、Ubuntu 20.04 LTSはまだリリースされていないため、チ...
目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...
01. コマンドの概要dirname - ファイル名からディレクトリ以外のサフィックスを削除しますd...