랜덤 이미지 출력하기 Javascript 소스
"랜덤 이미지 출력하기 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 속성으로 이미지에 대한 대체 텍스트를 제공할 수 있습니다.
[관련 글]
그리드형
댓글