カルーセルカルーセルケースの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 を応援していただければ幸いです。

以下もご興味があるかもしれません: