原生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='http://www.aoyou183.cn/imgs/1.jpg' rel='external nofollow' > <img src='http://www.aoyou183.cn/imgs/1.jpg' alt='1'></a><a href='http://www.aoyou183.cn/imgs/2.jpg' rel='external nofollow' > <img src='http://www.aoyou183.cn/imgs/2.jpg' alt='2'></a><a href='http://www.aoyou183.cn/imgs/3.jpg' rel='external nofollow' > <img src='http://www.aoyou183.cn/imgs/3.jpg' alt='3'></a><a href='http://www.aoyou183.cn/imgs/4.jpg' rel='external nofollow' > <img src='http://www.aoyou183.cn/imgs/4.jpg' alt='4'></a> </div> <!-- 清除浮動的 --> <div style='clear: both'></div><!--利用空白的一個圖占一個位置 --> <!-- <img src='http://www.aoyou183.cn/bcjs/14025.html' alt='' width='450px'> --><img src='http://www.aoyou183.cn/bcjs/14025.html' 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 id='fpic'src='http://www.aoyou183.cn/bcjs/trees/t1.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.aoyou183.cn/bcjs/trees/t2.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.aoyou183.cn/bcjs/trees/t3.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.aoyou183.cn/bcjs/trees/t4.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.aoyou183.cn/bcjs/trees/t5.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.aoyou183.cn/bcjs/trees/t6.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><div id='show-bigger'><img src='http://www.aoyou183.cn/bcjs/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實現畫廊功能的資料請關注好吧啦網其它相關文章！
相關文章：
網公網安備