랜덤 이미지 출력하기 Javascript 소스

폭스씨지 2023. 6. 5.

"랜덤 이미지 출력하기 Javascript 소스"

접속할 때마다 2개 이상의 이미지를 랜덤으로 출력하는 자바스크립트(Javascript) 소스를 공유합니다.

웹페이지를 새로고침 하면 랜덤으로 여러 개의 이미지 중에서 하나만 출력되는 소스입니다.

"랜덤 이미지 출력하기 Javascript 소스"

<!DOCTYPE html>
<html>
<head>
    <title>랜덤 이미지</title>
    <style>
        .random-image {
            display: none;
        }
        .show {
            display: block;
        }
    </style>
    <script>
        function showRandomImage() {
            var images = document.getElementsByClassName("random-image");
            var randomIndex = Math.floor(Math.random() * images.length);
            
            for (var i = 0; i < images.length; i++) {
                images[i].classList.remove("show");
            }
            
            images[randomIndex].classList.add("show");
        }
    </script>
</head>
<body onload="showRandomImage()">
    <img class="random-image" src="image1.jpg" alt="이미지 1">
    <img class="random-image" src="image2.jpg" alt="이미지 2">
    <img class="random-image" src="image3.jpg" alt="이미지 3">
    <img class="random-image" src="image4.jpg" alt="이미지 4">
</body>
</html>

위의 코드는 random-image라는 클래스를 가진 이미지 요소들을 선언하고, show라는 클래스를 추가하여 이미지를 표시하도록 합니다. showRandomImage() 함수는 페이지가 로드될 때 실행되어 랜덤으로 이미지를 선택하고 해당 이미지에 show 클래스를 추가하여 화면에 표시합니다.

이 코드를 웹 페이지에 추가하고 이미지 파일의 경로를 적절히 수정하여 사용하시면 됩니다. 각 이미지 태그에는 src 속성으로 이미지 파일의 경로를 지정하고, alt 속성으로 이미지에 대한 대체 텍스트를 제공할 수 있습니다.

[관련 글]

엑셀(Excel)의 표 → HTML 형식으로 변환하는 방법

"엑셀(Excel)의 표 → HTML 형식으로 변환하는 방법" 웹페이지를 제작하거나 블로그 포스팅 문서를 작성하기 위해서 복잡한 내용을 한눈에 알기 쉽도록 전달하기 위하여 표를 사용해야 할 경우가

foxcg.com

티스토리 포스팅 URL 통일하기 '?category' 꼬리표 제거 방법

"티스토리 포스팅 URL 통일하기 '?category' 꼬리표 제거 방법" 티스토리 블로그의 포스팅 URL은 설정에 따라 블로그주소 뒤에 숫자 혹은 문자로 이루어져 있습니다. 하지만, 카테고리 목록에서 원하

foxcg.com

네이버 개발전용 글꼴, 코딩 폰트 D2-Coding

"네이버 개발전용 글꼴, 코딩 폰트 D2-Coding" HTML이나 Java Script 등을 코딩할 경우, O와 0, ㅇ 등의 구분이 글꼴에 따라 명확하게 구분하기 어려운 경우가 많이 있습니다. 이런 경우에 사용하기 유용

foxcg.com

그리드형