原生Js實(shí)現(xiàn)的畫廊功能
原生Js實(shí)現(xiàn)畫廊功能,點(diǎn)擊圖片,在下方出現(xiàn)相應(yīng)放大圖片。給a標(biāo)簽綁定onclick點(diǎn)擊事件。這里上方的小圖和下方將要展示大圖,都是同一張圖片,只是上下兩個(gè)img的style中設(shè)置了不同的width和heigth。(如果不想設(shè)置width、height,另一種方法就是將a標(biāo)簽里src的圖片存成大圖,img展示的是小圖。)通過Js點(diǎn)擊事件結(jié)合css實(shí)現(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> <!-- 清除浮動(dòng)的 --> <div style="clear: both"></div> <!--利用空白的一個(gè)圖占一個(gè)位置 --> <!-- <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ā)時(shí),所有的批量添加的事件已經(jīng)成功,觸發(fā)事件時(shí)都是在循環(huán)結(jié)束之后 //批量綁定的事件的事件函數(shù)內(nèi)部如果有變量i,要注意,函數(shù)執(zhí)行時(shí)已經(jīng)是在循環(huán)結(jié)束后 //循環(huán)內(nèi)部定義的變量是一個(gè)全局變量,在循環(huán)后執(zhí)行的i變量的值是i跳出循環(huán)時(shí)的值 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)簽的默認(rèn)跳轉(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)簽的默認(rèn)跳轉(zhuǎn) } } </script> </body> </html>
第二種
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>簡易燈箱畫廊設(shè)計(jì)</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è)計(jì)</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>
以上就是原生Js實(shí)現(xiàn)的畫廊功能的詳細(xì)內(nèi)容,更多關(guān)于Js實(shí)現(xiàn)畫廊功能的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
小程序云開發(fā)教程如何使用云函數(shù)實(shí)現(xiàn)點(diǎn)贊功能
這篇文章主要為大家詳細(xì)介紹了小程序云開發(fā)教程如何使用云函數(shù)實(shí)現(xiàn)點(diǎn)贊功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05Bootstrap中g(shù)lyphicons-halflings-regular.woff字體報(bào)404錯(cuò)notfound的解
這篇文章主要介紹了 Bootstrap中g(shù)lyphicons-halflings-regular.woff字體報(bào)404錯(cuò)notfound的解決方法,需要的朋友可以參考下2017-01-01解決前端使用xlsx.js工具讀取excel遇到時(shí)間日期少43秒問題
這篇文章主要給大家介紹了關(guān)于如何解決前端使用xlsx.js工具讀取excel遇到時(shí)間日期少43秒問題的相關(guān)資料,xlsx.js是一種前端庫,它可以使您使用JavaScript讀取、解析和導(dǎo)出電子表格文件,如Microsoft Excel,需要的朋友可以參考下2024-03-03詳解Bootstrap glyphicons字體圖標(biāo)
本章將講解Bootstrap glyphicons字體圖標(biāo),并通過一些實(shí)例了解它的使用,字體圖標(biāo)是在 Web 項(xiàng)目中使用的圖標(biāo)字體。字體圖標(biāo)在下載的Bootstrap的fonts文件夾中2016-01-01JavaScript 讀URL參數(shù)增強(qiáng)改進(jìn)版版
網(wǎng)上有不少JavaScript 讀 URL 參數(shù)的函數(shù),但沒考慮到 URL 中帶 # 符的情況,我的可以處理這種情況,并使用了點(diǎn)對象寫法,優(yōu)化了些性能。2008-10-10