この記事の例では、カルーセルカルーセルを実装するためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 効果: 各絵の配置は中央を基準に左右対称になっています。画像のサイズと透明度は異なりますが、対称画像のスタイルは同じで、3 次元のカルーセル効果を表現します。 カルーセルダイナミックエフェクト画像: まずはコードを見てみましょう: <!DOCTYPE html> <html> <head lang="ja"> <メタ文字セット="UTF-8"> <title>カルーセル スライドショー</title> <link rel="スタイルシート" href="css/css.css" /> </head> <本文> <div class="wrap" id="wrap"> <div class="スライド" id="スライド"> <ul> <li><a href="#" ><img src="images/slidepic1.jpg" alt=""/></a></li> <li><a href="#" ><img src="images/slidepic2.jpg" alt=""/></a></li> <li><a href="#" ><img src="images/slidepic3.jpg" alt=""/></a></li> <li><a href="#" ><img src="images/slidepic4.jpg" alt=""/></a></li> <li><a href="#" ><img src="images/slidepic5.jpg" alt=""/></a></li> </ul> <div class="arrow" id="arrow"> <a href="javascript:void(0);" class="prev" id="arrLeft"></a> <a href="javascript:void(0);" class="next" id="arrRight"></a> </div> </div> </div> </本文> <スクリプト> //配列を定義し、絶対位置を使用して5つのliの位置を設定します。var config = [ { 幅: 400, トップ: 20, 残り: 50, 不透明度: 0.2、 zインデックス: 2 }, { 幅: 600, トップ: 70, 左: 0, 不透明度: 0.8、 zインデックス: 3 }, { 幅: 800, 上: 100, 残り: 200, 不透明度: 1, zインデックス: 4 }, { 幅: 600, トップ: 70, 残り: 600、 不透明度: 0.8、 zインデックス: 3 }, { 幅: 400, トップ: 20, 残り: 750, 不透明度: 0.2、 zインデックス: 2 } ]; //ページ読み込みイベント window.onload = function () { var flag = true; //すべてのアニメーションが終了したと想定します //画像が展開されます var list = my$("slide").getElementsByTagName("li"); 関数assgin() { (var i=0;i<list.length;i++) の場合 { //各liを設定して、ワイドレベルの透明度の左上が指定されたターゲット位置に到達するようにします。animate(list[i],config[i],function () { フラグ = true; }); } } アサーション(); // ボタンのクリック イベントを設定します // 右側のボタン イメージが時計回りに回転し、配列の最初の要素が末尾に配置されます/* pop() は最後の要素を削除します。push() は末尾に要素を追加します。shift() は最初の要素を削除します。unshift() は配列の先頭に要素を追加します*/ my$("arrRight").onclick = 関数(){ if (フラグ){ フラグ = false; config.shift() をプッシュします。 assgin(); // 再割り当て } }; //左ボタンの画像が反時計回りに回転し、配列の最後の要素が先頭に配置されます my$("arrLeft").onclick = function(){ if (フラグ){ フラグ = false; config.unshift(config.pop()); assgin(); // 再割り当て } }; //マウスが左右のフォーカスdivに入ると、my$("wrap")が表示されます。onmouseover = function () { アニメーション化(my$("arrow"),{"opacity":1}); }; //マウスが左または右のフォーカスdivから離れると、非表示になります。my$("wrap").onmouseout = function () { アニメーション化(my$("arrow"),{"opacity":0}); }; }; //IDで要素を取得する function my$(id) { document.getElementById(id) を返します。 } //任意の要素の任意のスタイル属性の値を取得する function getAttrValue(element,attr) { element.currentStyle?element.currentStyle[attr] を返します: window.getComputedStyle(element,null)[attr]||0; } // アニメーション関数 animate(element,json,fn) { 要素のtimeIdをクリアします。 要素.timeId=setInterval(関数() { var flag = true; // 目標が達成されたと仮定します for (var attr in json) { if(attr=="opacity"){//属性が不透明かどうかを判定する var current = getAttrValue(要素、attr)*100; // 毎回何ステップ移動するかvar target=json[attr]*100;// 変数に直接値を割り当てるため、次のコードは変更する必要はありませんvar step=(target-current)/10;//(target-current)/10 ステップ=step>0?Math.ceil(step):Math.floor(step); 現在の値=現在の値+ステップ; 要素.style[attr]=現在の/100; }else if(attr=="zIndex"){//属性がzIndexかどうかを判定する 要素.style[attr]=json[attr]; }else{//通常の属性//現在の位置を取得します----getAttrValue(element,attr) は文字列型を取得します var current= parseInt(getAttrValue(element,attr))||0; // 毎回何ステップ移動するかvar target=json[attr];// 変数に直接割り当てます。次のコードを変更する必要はありませんvar step=(target-current)/10;//(target-current)/10 ステップ=step>0?Math.ceil(step):Math.floor(step); 現在の値=現在の値+ステップ; element.style[attr]=現在の値+"px"; } if(現在値!=ターゲット値){ flag=false; //目標結果に達しない場合はfalseになります } } if(flag){//結果は真です 要素のtimeIdをクリアします。 if(fn){//ユーザーがコールバック関数fn()を渡した場合; //直接呼び出します。 } } console.log("ターゲット:"+ターゲット+"現在:"+現在+"ステップ:"+ステップ); },10); } </スクリプト> </html> css.css スタイル: @charset "UTF-8"; /*初期化リセット*/ blockquote、body、button、dd、dl、dt、fieldset、form、h1、h2、h3、h4、h5、h6、hr、input、legend、li、ol、p、pre、td、textarea、th、ul{margin:0;padding:0} 本文、ボタン、入力、選択、テキストエリア{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;} ol,ul{リストスタイル:なし} a{テキスト装飾:なし} フィールドセット、画像{ボーダー:0;垂直配置:上;} a、入力、ボタン、選択、テキストエリア{アウトライン:なし;} a,ボタン{カーソル:ポインター;} 。包む{ 幅:1200ピクセル; マージン:100px 自動; } .スライド{ 高さ:500px; 位置: 相対的; } .スライド li{ 位置: 絶対; 左:200px; トップ:0; } .スライド li 画像{ 幅:100%; } .矢印{ 不透明度: 0; } .前へ,.次へ{ 幅:76px; 高さ:112px; 位置: 絶対; 上位:50%; 上マージン:-56px; 背景: url(../images/prev.png) 繰り返しなし; zインデックス: 99; } 。次{ 右:0; 背景画像: url(../images/next.png); } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: XHTML 入門チュートリアル: フレーム タグの使用
>>: DockerイントラネットはDNSを構築し、ip:port操作の代わりにドメイン名アクセスを使用します
Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...
目次ソリューション分析スライス履歴書のダウンロード具体的な解決プロセス論理的分析フロントエンドサーバ...
トランザクションは、論理的な操作のグループです。この操作グループを構成する各ユニットは、成功するか失...
のようにLIKE ではデータ全体が一致する必要がありますが、REGEXP では部分的な一致のみが必要...
1. 問題の説明: MysqlERROR1698 (28000) の解決方法、新しくインストールされ...
目次1. オブジェクトを使用してオブジェクトを作成する2. コンストラクタを使用してオブジェクトを作...
まずコードを見てみましょうコードをコピーコードは次のとおりです。 <div style=&qu...
mysql 効率的なクエリMySQL は、左結合の速度を上げるために group by を犠牲にし...
MySQL を頻繁に使用する人は、次のような状況に遭遇する可能性があります。 1. フィールド タ...
目次1. Docker Composeとは何か、インストールして使用する方法2. DOCleverと...
理由: MySQL 5.7.5 以降では機能依存関係の検出が実装されています。 only_full_...
npx 使用チュートリアル今晩、 Vue-Cli勉強していたところ、ふと最新の@4.xxバージョンを...
1. TEXTとBLOBの違いTEXT ファミリと BLOB ファミリの唯一の違いは、BLOB 型は...
ドロップダウン付きのテキストボックスを使用すると、ユーザーはドロップダウン リストから入力を選択した...
インストール必要な書類は下部に記載されていますステップ1 mysql-installer-web-c...