原生Js實現的畫廊功能
原生Js實現畫廊功能，點擊圖片，在下方出現相應放大圖片。給a標簽綁定onclick點擊事件。這裡上方的小圖和下方將要展示大圖，都是同一張圖片，隻是上下兩個img的style中設置瞭不同的width和heigth。（如果不想設置width、height，另一種方法就是將a標簽裡src的圖片存成大圖，img展示的是小圖。）通過Js點擊事件結合css實現大圖顯示或隱藏，切換圖片
具體如下圖，代碼附上
第一種
<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循環內部添加的綁定事件，在觸發時，所有的批量添加的事件已經成功，觸發事件時都是在循環結束之後
//批量綁定的事件的事件函數內部如果有變量i，要註意，函數執行時已經是在循環結束後
//循環內部定義的變量是一個全局變量，在循環後執行的i變量的值是i跳出循環時的值 image.src = links[i].href;
// for(var i = 0;i < link.length;i++){
// link[i].onclick = function(){
// // alert("123");
// // 更改image內部的src屬性值
// showimg.src = link[i].href;
// // 更改desc內部文字描述
// return false;//取消a標簽的默認跳轉
// }
// }
for(var i = 0;i < link.length;i++){
link[i].onclick = function(){
// alert("123");
// 更改image內部的src屬性值
showimg.src = this.href;//this. 關鍵字指代的是觸發事件的真正事件源
//更改img顯示
showimg.className = "show";
// 更改desc內部文字描述
desc.innerText = this.title;
return false;//取消a標簽的默認跳轉
}
}
</script>
</body>
</html>
第二種
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡易燈箱畫廊設計</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;">簡易畫廊設計</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){ //消除未選擇的邊框屬性
x.style.border="none";
}
</script>
</html>
以上就是原生Js實現的畫廊功能的詳細內容，更多關於Js實現畫廊功能的資料請關註WalkonNet其它相關文章！