原生Js實現(xiàn)的畫廊功能
原生Js實現(xiàn)畫廊功能，點擊圖片，在下方出現(xiàn)相應(yīng)放大圖片。給a標簽綁定onclick點擊事件。這里上方的小圖和下方將要展示大圖，都是同一張圖片，只是上下兩個img的style中設(shè)置了不同的width和heigth。（如果不想設(shè)置width、height，另一種方法就是將a標簽里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='http://www.cgvv.com.cn/imgs/1.jpg' rel='external nofollow' > <img src='http://www.cgvv.com.cn/imgs/1.jpg' alt='1'></a><a href='http://www.cgvv.com.cn/imgs/2.jpg' rel='external nofollow' > <img src='http://www.cgvv.com.cn/imgs/2.jpg' alt='2'></a><a href='http://www.cgvv.com.cn/imgs/3.jpg' rel='external nofollow' > <img src='http://www.cgvv.com.cn/imgs/3.jpg' alt='3'></a><a href='http://www.cgvv.com.cn/imgs/4.jpg' rel='external nofollow' > <img src='http://www.cgvv.com.cn/imgs/4.jpg' alt='4'></a> </div> <!-- 清除浮動的 --> <div style='clear: both'></div><!--利用空白的一個圖占一個位置 --> <!-- <img src='http://www.cgvv.com.cn/bcjs/14025.html' alt='' width='450px'> --><img src='http://www.cgvv.com.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循環(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標簽的默認跳轉(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標簽的默認跳轉(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 id='fpic'src='http://www.cgvv.com.cn/bcjs/trees/t1.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.cgvv.com.cn/bcjs/trees/t2.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.cgvv.com.cn/bcjs/trees/t3.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.cgvv.com.cn/bcjs/trees/t4.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.cgvv.com.cn/bcjs/trees/t5.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><img src='http://www.cgvv.com.cn/bcjs/trees/t6.jpg' onclick='myfunction(this)' tabIndex=1 onblur='myfunction1(this)'><div id='show-bigger'><img src='http://www.cgvv.com.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){ //消除未選擇的邊框?qū)傩詘.style.border='none';}</script></html>
以上就是原生Js實現(xiàn)的畫廊功能的詳細內(nèi)容，更多關(guān)于Js實現(xiàn)畫廊功能的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
網(wǎng)公網(wǎng)安備