JavaScript를 사용하여 웹 갤러리 개발-JS 튜토리얼-php.cn

JavaScript를 사용하여 웹 갤러리 개발

PHPz

풀어 주다： 2023-08-09 20:10:43

원래의

1162명이 탐색했습니다.

JavaScript를 사용하여 웹 갤러리 개발

인터넷이 계속해서 발전함에 따라 웹 디자인은 더욱 세련되고 인터랙티브해졌습니다. 그중 갤러리는 여러 사진을 표시하고 탐색 및 전환 기능을 제공할 수 있는 일반적인 웹 디자인 요소입니다. 이 문서에서는 JavaScript를 사용하여 간단한 웹 갤러리를 개발하는 방법을 설명하고 코드 예제를 제공합니다.

먼저 이미지 리소스를 준비해야 합니다. 프로젝트 폴더에 "images"라는 폴더를 만들고 그 안에 모든 사진을 넣을 수 있습니다. 여기서는 5개의 사진을 예로 사용합니다. 이미지 리소스가 준비되면 JavaScript 코드 작성을 시작합니다.

HTML 구조 만들기
먼저 이미지를 표시하고 전환 기능을 제공하기 위한 HTML 구조를 만들어야 합니다. 코드는 다음과 같습니다:

<!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 id="image" src="images/1.jpg" alt="image">
    </div>
    <div class="controls">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>

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

로그인 후 복사

위 코드에서는 "gallery" 클래스가 있는 div를 사용하여 사진을 보관하고 ID가 "image"인 img 요소를 사용하여 사진을 표시합니다. 아래는 이전 사진과 다음 사진으로 전환하기 위한 두 개의 버튼이 포함된 "controls" 클래스가 있는 div입니다. 이런 식으로 기본 HTML 구조를 만듭니다.

JavaScript 로직 작성
다음으로 이미지 전환 기능을 구현하기 위한 JavaScript 코드를 작성해야 합니다. 프로젝트 폴더에 "script.js"라는 파일을 생성하고 다음 코드를 작성합니다.

// 获取元素
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];
});

로그인 후 복사

위 코드에서는 먼저 getElementById 메소드를 통해 연산해야 할 요소인 img 요소와 두 가지 요소를 얻습니다. 버튼. 그런 다음 모든 이미지의 경로를 포함하는 배열 이미지를 정의하고 현재 표시된 이미지의 인덱스를 0으로 초기화합니다.

다음으로, addEventListener 메소드를 통해 prevBtn 버튼에 클릭 이벤트 리스너를 추가하세요. 버튼을 클릭하면 currentIndex가 1씩 감소하고 해당 인덱스가 0보다 작은지 확인합니다. 그렇다면 currentIndex를 이미지 배열의 마지막 요소의 인덱스 값으로 설정합니다. 즉, 루프 전환을 구현합니다. 마지막으로 img 요소의 src 속성을 현재 인덱스에 해당하는 이미지 경로로 설정합니다.

다음으로 비슷한 클릭 이벤트 리스너를 nextBtn 버튼에 추가합니다. 버튼을 클릭하면 currentIndex가 1씩 증가하고 해당 인덱스가 이미지 배열의 길이를 초과하는지 확인합니다. 그렇다면 currentIndex를 0으로 설정하여 루프 전환을 구현하세요. 마지막으로 img 요소의 src 속성을 현재 인덱스에 해당하는 이미지 경로로 설정합니다.

웹페이지 실행
위 단계를 완료한 후 파일을 저장하고 브라우저에서 HTML 파일을 엽니다. 이제 이전 및 다음 버튼을 사용하여 표시된 사진을 전환할 수 있습니다. 버튼을 클릭하여 사진을 정상적으로 전환할 수 있는지 확인해 보세요.

요약
위는 JavaScript를 사용하여 웹 갤러리를 개발하는 간단한 예입니다. img 요소의 src 속성을 동적으로 변경하여 이미지 전환 기능을 구현할 수 있습니다. 이는 단지 기본적인 예일 뿐이며, 이미지 사전 로드, 확대/축소 등을 추가하는 등 추가로 확장할 수 있습니다. 이 기사가 여러분에게 영감을 줄 수 있기를 바라며, 웹 디자인에서 더 나은 결과를 얻기를 바랍니다!

위 내용은 JavaScript를 사용하여 웹 갤러리 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!