快捷導(dǎo)航

原生Js實現(xiàn)的畫廊功能

更新時間：2021年05月10日 17:28:42 作者：小白可別不舉鐵

這篇文章主要介紹了原生Js實現(xiàn)的畫廊功能，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下

原生Js實現(xiàn)畫廊功能，點擊圖片，在下方出現(xiàn)相應(yīng)放大圖片。給a標(biāo)簽綁定onclick點擊事件。這里上方的小圖和下方將要展示大圖，都是同一張圖片，只是上下兩個img的style中設(shè)置了不同的width和heigth。（如果不想設(shè)置width、height，另一種方法就是將a標(biāo)簽里src的圖片存成大圖，img展示的是小圖。）通過Js點擊事件結(jié)合css實現(xiàn)大圖顯示或隱藏，切換圖片

具體如下圖，代碼附上

第一種

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 200px;
            height: 100px;

        }
        #showimg{
            width: 500px;
            height: 240px;
          /*  background-color: pink;*/
        }
        .hide{
            display: none;
        }
        .show{
            display: block;
        }
    </style>
</head>
<body>
    <div id = "imagegallery">
        <a href="../../imgs/1.jpg" rel="external nofollow"  title="pic1">
            <img src="../../imgs/1.jpg" alt="1">
        </a>

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

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

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

    <!-- 清除浮動的 -->
    <div style="clear: both"></div>
    
    <!--利用空白的一個圖占一個位置  -->
    <!-- <img id="image" src="" alt="" width="450px"> -->

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

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


    
    <script>
        var imagegallery = document.getElementById("imagegallery");
        var link = document.getElementsByTagName("a");
        var showimg = document.getElementById("showimg");
        var desc = document.getElementById("desc");



        //for循環(huán)內(nèi)部添加的綁定事件，在觸發(fā)時，所有的批量添加的事件已經(jīng)成功，觸發(fā)事件時都是在循環(huán)結(jié)束之后
        //批量綁定的事件的事件函數(shù)內(nèi)部如果有變量i，要注意，函數(shù)執(zhí)行時已經(jīng)是在循環(huán)結(jié)束后
       //循環(huán)內(nèi)部定義的變量是一個全局變量，在循環(huán)后執(zhí)行的i變量的值是i跳出循環(huán)時的值    image.src = links[i].href;
        
       // for(var i = 0;i < link.length;i++){
        //     link[i].onclick = function(){
        //         // alert("123");
        //         // 更改image內(nèi)部的src屬性值
        //         showimg.src = link[i].href;
        //         // 更改desc內(nèi)部文字描述
        //         return false;//取消a標(biāo)簽的默認跳轉(zhuǎn)
        //     }
        // }
       
        
        for(var i = 0;i < link.length;i++){
            link[i].onclick = function(){
                // alert("123");
                // 更改image內(nèi)部的src屬性值
                showimg.src = this.href;//this. 關(guān)鍵字指代的是觸發(fā)事件的真正事件源
                //更改img顯示
                showimg.className = "show";
                // 更改desc內(nèi)部文字描述
                desc.innerText = this.title;
                return false;//取消a標(biāo)簽的默認跳轉(zhuǎn)
            }
        }


      

        
    </script>
</body>
</html>

第二種

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>簡易燈箱畫廊設(shè)計</title>
	<style>
	*{
		margin: 0;
	}
		#total{
			width:100%;
			background-color: green;
			height:1000px;
		}
        #fpic{
        	margin-left: 15%;
        }
		.pic{
			margin : 50px;
			width: 100px;
			height: 100px;
		}
		#show-bigger{
			margin: auto;
			width: 600px;
			height: 450px;
			background-color: red;
		}
	</style>
</head>
<body >
<div id="total">
<h3 style="color: white;text-align:center;">簡易畫廊設(shè)計</h3>	
<hr color="red">
<img  class="pic" id="fpic"src="trees/t1.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<img  class="pic" src="trees/t2.jpg" onclick="myfunction(this)"  tabIndex=1 onblur="myfunction1(this)">
<img  class="pic" src="trees/t3.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<img  class="pic" src="trees/t4.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<img  class="pic" src="trees/t5.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<img  class="pic" src="trees/t6.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<div id="show-bigger"><img  id="spic" src="trees/t1.jpg" style="width: 100%;height: 100%"></div>
</div>
</body>
<script type="text/javascript">
	function myfunction(x){                          //改變展示框的圖片和被選中展示圖片的邊框
		document.getElementById("spic").src=x.src;
		x.style.borderBottom="5px solid red";
	}
	function myfunction1(x){     //消除未選擇的邊框?qū)傩?
		x.style.border="none";        
	}
</script>
</html>