カルーセルカルーセルケースの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操作の代わりにドメイン名アクセスを使用します

推薦する

ウェブデザインでよくある間違いのまとめ

Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...

Node.jsはブレークポイント再開を実装する

目次ソリューション分析スライス履歴書のダウンロード具体的な解決プロセス論理的分析フロントエンドサーバ...

MySQLトランザクションの基本的な学習と経験の共有

トランザクションは、論理的な操作のグループです。この操作グループを構成する各ユニットは、成功するか失...

MYSQLパターンマッチングREGEXPの使用に関する一般的な話など

のようにLIKE ではデータ全体が一致する必要がありますが、REGEXP では部分的な一致のみが必要...

MySql エラー 1698 (28000) の解決策

1. 問題の説明: MysqlERROR1698 (28000) の解決方法、新しくインストールされ...

JavaScriptカスタムオブジェクトメソッドの概要

目次1. オブジェクトを使用してオブジェクトを作成する2. コンストラクタを使用してオブジェクトを作...

HTML に FLASH へのリンクを追加し、すべての主要ブラウザと互換性を持たせる方法

まずコードを見てみましょうコードをコピーコードは次のとおりです。 <div style=&qu...

MySQL の効率的なクエリの左結合とグループ化 (プラス インデックス)

mysql 効率的なクエリMySQL は、左結合の速度を上げるために group by を犠牲にし...

MySQL の null 可能フィールドは NULL に設定する必要がありますか、それとも NOT NULL に設定する必要がありますか?

MySQL を頻繁に使用する人は、次のような状況に遭遇する可能性があります。 1. フィールド タ...

Docker Composeを使用してDOCleverをインストールする詳細なプロセスを説明します

目次1. Docker Composeとは何か、インストールして使用する方法2. DOCleverと...

Node.js における npx コマンドの使用法とシナリオ分析

npx 使用チュートリアル今晩、 Vue-Cli勉強していたところ、ふと最新の@4.xxバージョンを...

MySQLでTEXT/BLOB型を使用する際の注意点を詳しく説明します

1. TEXTとBLOBの違いTEXT ファミリと BLOB ファミリの唯一の違いは、BLOB 型は...

Vue.js ドロップダウン コンポーネント付きテキストボックス

ドロップダウン付きのテキストボックスを使用すると、ユーザーはドロップダウン リストから入力を選択した...

MySQL8インストーラーバージョングラフィックチュートリアル

インストール必要な書類は下部に記載されていますステップ1 mysql-installer-web-c...