Gallery function implemented by native Js
|
Native Js implements the gallery function. Click on the picture and the corresponding enlarged picture will appear below. Bind the onclick event to the a tag. The small image above and the large image below are the same image, but different width and height are set in the styles of the two imgs. (If you don't want to set width and height, another way is to save the image in the src of the a tag as a large image, and img displays a small image.) Use Js click events combined with CSS to display or hide the large image and switch images The details are as follows, and the code is attached The first
<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>
<!-- Clear floating -->
<div style="clear: both"></div>
<!--Use a blank image to occupy a position-->
<!-- <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 the bound events added inside the for loop, when triggered, all the batch added events have been successful, and the events are triggered after the loop ends. //If there is a variable i inside the event function of the batch bound events, please note that the function is executed after the loop ends. //The variable defined inside the loop is a global variable. The value of the variable i executed after the loop is the value when i jumps out of the loop. image.src = links[i].href;
// for(var i = 0;i < link.length;i++){
// link[i].onclick = function(){
// // alert("123");
// // Change the src attribute value inside the image // showimg.src = link[i].href;
// // Change the text description in desc // return false; // Cancel the default jump of label a // }
// }
for(var i = 0;i < link.length;i++){
link[i].onclick = function(){
// alert("123");
// Change the src attribute value inside the imageshowimg.src = this.href;//this. keyword refers to the real event source that triggers the event//Change the img displayshowimg.className = "show";
// Change the text description inside desc desc.innerText = this.title;
return false; //Cancel the default jump of label a}
}
</script>
</body>
</html>
The second
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple light box gallery design</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;">Simple gallery design</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){ //Change the image in the display box and the border of the selected image document.getElementById("spic").src=x.src;
x.style.borderBottom="5px solid red";
}
function myfunction1(x){ //Eliminate unselected border attributes x.style.border="none";
}
</script>
</html>
The above is the details of the gallery function implemented by native Js. For more information about the gallery function implemented by Js, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: MySQL 8.0.11 compressed version installation tutorial
>>: mysql8.0 windows x64 zip package installation and configuration tutorial
Recommend
Detailed explanation of 2 methods to synchronize network time in Linux/CentOS system
Due to hardware reasons, the machines may not kee...
How to configure two-way certificate verification on nginx proxy server
Generate a certificate chain Use the script to ge...
How to create a scroll bar with fixed navigation and left and right sliding using CSS
As shown above, the navigation is fixed at the to...
Using Vue to implement timer function
This article example shares the specific code of ...
Summary of Linux nc command
NC's full name is Netcat (Network Knife), and...
VMware vSAN Getting Started Summary
1. Background 1. Briefly introduce the shared sto...
Detailed explanation of MySQL 8.0 dictionary table enhancement
The data dictionary in MySQL is one of the import...
VUE+Canvas realizes the whole process of a simple Gobang game
Preface In terms of layout, Gobang is much simple...
js to achieve the effect of light switch
This article example shares the specific code of ...
MYSQL Operator Summary
Table of contents 1. Arithmetic operators 2. Comp...
Practical Optimization of MySQL Paging Limit
Preface When we use query statements, we often ne...
Is it easy to encapsulate a pop-up component using Vue3?
Table of contents Summary put first: 🌲🌲 Preface: ...
Horizontal header menu implemented with CSS3
Result:Implementation Code html <nav class=&qu...
How to share Flash pages through verification methods in website standards
1. Embed is illegal The <embed> tag is a pri...
How to use worker_threads to create new threads in nodejs
Introduction As mentioned in the previous article...