ネイティブJSで実装されたギャラリー機能

Native Js はギャラリー機能を実装します。画像をクリックすると、対応する拡大画像が下に表示されます。 onclick イベントを a タグにバインドします。上の小さい画像と下の大きい画像は同じ画像ですが、2 つの画像のスタイルで幅と高さが異なって設定されています。（幅と高さを設定しない場合は、aタグのsrcに大きい画像として画像を保存し、imgに小さい画像を表示するという方法もあります。）CSSと組み合わせたJsクリックイベントを使用して、大きい画像の表示/非表示や画像の切り替えを行います。

詳細は以下のとおりで、コードは添付されています

最初

<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
        }
        画像{
            幅: 200ピクセル;
            高さ: 100px;

        }
        #表示画像{
            幅: 500ピクセル;
            高さ: 240px;
          /* 背景色: ピンク;*/
        }
        。隠れる{
            表示: なし;
        }
        。見せる{
            表示: ブロック;
        }
    </スタイル>
</head>
<本文>
    <div id = "画像ギャラリー">
        <a href="../../imgs/1.jpg" rel="外部nofollow" title="pic1">
            <img src="../../imgs/1.jpg" alt="1">
        </a>

        <a href="../../imgs/2.jpg" rel="外部nofollow" title="pic2">
            <img src="../../imgs/2.jpg" alt="2">
        </a>

        <a href="../../imgs/3.jpg" rel="外部nofollow" title="pic3">
            <img src="../../imgs/3.jpg" alt="3">
        </a>

        <a href="../../imgs/4.jpg" rel="外部nofollow" title="pic4">
            <img src="../../imgs/4.jpg" alt="4">
        </a>
    </div>

    <!-- フローティングをクリア -->
    <div style="clear: both"></div>
    
    <!-- 空白の画像を使用して位置を占める -->
    <!-- <img id="画像" src="" alt="" width="450px"> -->

    
    <img id="showimg" src="" class="hide" alt="">

    <p id="desc"></p>


    
    <スクリプト>
        var imagegallery = document.getElementById("imagegallery");
        var link = document.getElementsByTagName("a");
        var showimg = document.getElementById("showimg");
        var desc = document.getElementById("desc");



        // for ループ内に追加されたバインドされたイベントは、トリガーされると、バッチ追加されたすべてのイベントが成功し、ループ終了後にイベントがトリガーされます。 // バッチバインドイベントのイベント関数内に変数 i がある場合、関数はループ終了後に実行されることに注意してください。 // ループ内で定義された変数はグローバル変数です。ループ後に実行された変数 i の値は、i がループから抜け出したときの値です。 image.src = links[i].href;
        
       // for(var i = 0;i < link.length;i++){
        // link[i].onclick = function(){
        // // アラート("123");
        // // 画像内のsrc属性値を変更します // showimg.src = link[i].href;
        // // desc のテキスト説明を変更します // false を返します; // ラベル a のデフォルトのジャンプをキャンセルします // }
        // }
       
        
        for(var i = 0;i < link.length;i++){
            link[i].onclick = 関数(){
                // アラート("123");
                // 画像内の src 属性値を変更します。showimg.src = this.href;//this.keyword は、イベントをトリガーする実際のイベント ソースを参照します//img を変更します。displayshowimg.className = "show";
                // desc 内のテキスト説明を変更します。desc.innerText = this.title;
                return false; //ラベルaのデフォルトのジャンプをキャンセルします}
        }


      

        
    </スクリプト>
</本文>
</html>

2番目

<!DOCTYPE html>
<html>
<ヘッド>
	<メタ文字セット="utf-8">
	<title>シンプルなライトボックス ギャラリー デザイン</title>
	<スタイル>
	*{
		マージン: 0;
	}
		＃合計{
			幅:100%;
			背景色: 緑;
			高さ:1000ピクセル;
		}
        #fpic{
        	左マージン: 15%;
        }
		.pic{
			マージン: 50px;
			幅: 100ピクセル;
			高さ: 100px;
		}
		#大きく表示する{
			マージン: 自動;
			幅: 600ピクセル;
			高さ: 450px;
			背景色: 赤;
		}
	</スタイル>
</head>
<本文>
<div id="total">
<h3 style="color: white;text-align:center;">シンプルなギャラリーデザイン</h3>	
<hr color="red">
<img class="pic" id="fpic"src="trees/t1.jpg" onclick="myfunction(これ)" tabIndex=1 onblur="myfunction1(これ)">
<img class="pic" src="trees/t2.jpg" onclick="myfunction(これ)" tabIndex=1 onblur="myfunction1(これ)">
<img class="pic" src="trees/t3.jpg" onclick="myfunction(これ)" tabIndex=1 onblur="myfunction1(これ)">
<img class="pic" src="trees/t4.jpg" onclick="myfunction(これ)" tabIndex=1 onblur="myfunction1(これ)">
<img class="pic" src="trees/t5.jpg" onclick="myfunction(これ)" tabIndex=1 onblur="myfunction1(これ)">
<img class="pic" src="trees/t6.jpg" onclick="myfunction(これ)" tabIndex=1 onblur="myfunction1(これ)">
<div id="show-bigger"><img id="spic" src="trees/t1.jpg" style="幅: 100%;高さ: 100%"></div>
</div>
</本文>
<script type="text/javascript">
	function myfunction(x){ //表示ボックス内の画像と選択した画像の境界線を変更します。 document.getElementById("spic").src=x.src;
		x.style.borderBottom="5px 赤一色";
	}
	function myfunction1(x){ //選択されていない境界属性を削除します x.style.border="none";        
	}
</スクリプト>
</html>