Developing a web gallery using JavaScript-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Developing a web gallery using JavaScript

PHPz

Aug 09, 2023 pm 08:10 PM

javascriptWeb pagegallery

Developing a web gallery using JavaScript

Developing web galleries using JavaScript

As the Internet continues to develop, web design has become more refined and interactive. Among them, gallery is a common web design element, which can display multiple pictures and provide browsing and switching functions. This article explains how to develop a simple web gallery using JavaScript and provides code examples.

First, we need to prepare some image resources. You can create a folder called "images" in your project folder and put all your pictures in it. Here we use five pictures as examples. After the image resources are ready, we start writing JavaScript code.

Create HTML structure
We first need to create an HTML structure to display images and provide switching functions. The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>网页画廊</title>
    <style>
        .gallery {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
        }
        
        .gallery img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        .controls button {
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="gallery">
        <img src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"  id="image" alt="image">
    </div>
    <div class="controls">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

In the above code, we use a div with the "gallery" class to accommodate the image, and an img element with the id "image" to display the image. Below is a div with the "controls" class, which contains two buttons for switching to the previous and next pictures. This way we create the basic HTML structure.

Writing JavaScript logic
Next, we need to write JavaScript code to implement the image switching function. Create a file named "script.js" in the project folder and write the following code:

// 获取元素
const image = document.getElementById("image");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");

// 图片列表
const images = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"];

// 当前显示的图片索引
let currentIndex = 0;

// 切换到上一张图片
prevBtn.addEventListener("click", () => {
    currentIndex--;
    if (currentIndex < 0) {
        currentIndex = images.length - 1;
    }
    image.src = images[currentIndex];
});

// 切换到下一张图片
nextBtn.addEventListener("click", () => {
    currentIndex++;
    if (currentIndex >= images.length) {
        currentIndex = 0;
    }
    image.src = images[currentIndex];
});

In the above code, we first obtain the element that needs to be operated through the getElementById method, that is img element and two buttons. Then, we define an array images that contains the paths of all images, and initialize the index of the currently displayed image to 0.

Next, add a click event listener to the prevBtn button through the addEventListener method. When the button is clicked, currentIndex is decremented by 1 and checks if the index is less than 0. If so, set currentIndex to the index value of the last element of the images array, that is, to implement loop switching. Finally, set the src attribute of the img element to the image path corresponding to the current index.

Next, we add a similar click event listener to the nextBtn button. When the button is clicked, currentIndex is incremented by 1 and checks whether the index exceeds the length of the images array. If so, set currentIndex to 0 to implement loop switching. Finally, also set the src attribute of the img element to the image path corresponding to the current index.

Run the web page
After completing the above steps, save the file and open the HTML file in the browser. Now we can use the previous and next buttons to switch the displayed pictures. Try clicking the button to see if you can switch pictures normally.

Summary
The above is a simple example of using JavaScript to develop a web gallery. By dynamically changing the src attribute of the img element, we can implement the image switching function. This is just a basic example, you can extend it further, such as adding image preloading, zooming, etc. I hope this article can bring you some inspiration, and I wish you better results in web design!

The above is the detailed content of Developing a web gallery using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn