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
Solution to the problem that VMware15 virtual machine bridge mode cannot access the Internet
Description Solution VMware 15 virtual machine br...
How to implement Nginx reverse proxy for multiple servers
Nginx reverse proxy multiple servers, which means...
Analysis and solution of the reasons why MySQL scheduled tasks cannot be executed normally
Table of contents Preface Cause analysis and solu...
Statement to determine browser version and compatible with multiple browsers
<!--[if lte IE 6]> <![endif]--> Visibl...
Detailed tutorial on building nextcloud private cloud storage network disk
Nextcloud is an open source and free private clou...
A brief discussion on HTML doctype and encoding
DOCTYPE Doctype is used to tell the browser which...
MySQL encoding utf8 and utf8mb4 utf8mb4_unicode_ci and utf8mb4_general_ci
Reference: MySQL character set summary utf8mb4 ha...
A brief discussion on VUE uni-app custom components
1. Parent components can pass data to child compo...
Detailed explanation of using Docker to quickly deploy the ELK environment (latest version 5.5.1)
After installing Docker on the Linux server, Pull...
The difference between distinct and group by in MySQL
Simply put, distinct is used to remove duplicates...
Detailed steps to implement the Excel import function in Vue
1. Front-end-led implementation steps The first s...
Write a dynamic clock on a web page in HTML
Use HTML to write a dynamic web clock. The code i...
Detailed explanation of how to adjust Linux command history
The bash history command in Linux system helps to...
JavaScript source code for Elimination
JavaScript to achieve the source code download ad...
In-depth explanation of binlog in MySQL 8.0
1 Introduction Binary log records SQL statements ...