カルーセルカルーセルケースのJS実装

カルーセルカルーセルケースのJS実装

この記事の例では、カルーセルカルーセルを実装するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js カルーセル効果
  • カルーセルスライドショーを実装するためのJavaScript
  • カルーセルカルーセルの効果を実現するためのjs
  • JS はカルーセルスライドショーを実装します
  • カルーセル効果を実現する js
  • カルーセルカルーセル効果を実現するネイティブ js
  • JSはカルーセルスタイルの画像回転効果を実現します
  • カルーセルスタイルの画像回転プラグインを実装するネイティブJS
  • カルーセル効果を実現するネイティブ js

<<:  XHTML 入門チュートリアル: フレーム タグの使用

>>:  DockerイントラネットはDNSを構築し、ip:port操作の代わりにドメイン名アクセスを使用します

推薦する

Nginx で Basic Auth ログイン認証を設定する方法

nginx でファイルサーバーを構築することもありますが、これは一般に公開されていますが、サーバーが...

JavaScript における一般的な配列操作

目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....

MySQLの認証コマンドgrantの使い方

この記事の例は MySQL 5.0 以降で実行されます。ユーザー権限を付与するための MySQL コ...

Vueは動的コンポーネントを使用してTAB切り替え効果を実現します

目次問題の説明Vueの動的コンポーネントとはアプリケーションシナリオの説明実装手順ステップ 1 (新...

Docker execは複数のコマンドを実行します

docker exec コマンドは、実行中のコンテナ内でコマンドを実行できます。 docker ex...

Ubuntu 20.04 に Python 3 仮想環境をインストールする詳細なチュートリアル

以下はすべて仮想マシン上で実行されます1. pip3をインストールするsudo apt で pyth...

航空機戦争ゲームを実装するためのネイティブJS

この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...

Nodejs で WeChat アカウント分割を実装するためのサンプルコード

会社のビジネスシナリオでは、WeChat アカウント分割機能を使用する必要があります。公式 Web ...

MySQL 5.7.17 最新インストールチュートリアル(画像とテキスト付き)

mysql-5.7.17-winx64 は MySQL の最新バージョンです。インストールは無料で...

近々ブラウザに導入される CSS :is() と :where() の簡単な分析

Safari (Technology Preview 106) および Firefox (バージョン...

WeChat 8.0の爆発的な特殊効果を実現するために300行以上のCSSコードが必要

WeChat 8.0 アップデートの主な特徴は、アニメーション絵文字のサポートです。送信するメッセー...

Linuxはバイナリモードを使用してmysqlをインストールします

この記事では、LinuxにバイナリモードでMySQLをインストールする具体的な手順を参考までに紹介し...

Vue+element+springboot でファイルダウンロードの進行状況バー表示機能を実装する例

目次1. 需要背景2. 最適化計画3. 具体的な実施3.1 フロントエンドコード3.2 背景コード4...

Reactはtodolistの追加、削除、変更、クエリを実装します

目次ToDoリストを例に挙げましょうディレクトリは次のとおりですアプリ入力.jsリスト.jsアイテム...

ドラッグアンドドロップでVueユーザーインターフェースを生成する方法

目次序文1. 技術原理1.1 レイアウト1.2 コンポーネント1.3 ステータス1.4 イベント1....