반응형
[Html & CSS] 사진 클릭하면서 넘기는 효과 주는 방법 !!
javascript로 사진 클릭하면 변경되는 효과를 줘봤습니다 ㅎ
예제코드
<!DOCTYPE html>
<html>
<head>
<title>사진 클릭 변경</title>
<style>
body {
font-family: Arial, sans-serif;
}
.gallery {
max-width: 500px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
max-height: 300px;
cursor: pointer;
transition: transform 0.3s;
}
img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<h1>사진 클릭 변경</h1>
<div class="gallery" id="gallery">
<img src="https://www.hidomin.com/news/photo/202105/453232_224470_4025.jpg" onclick="showNextImage()" />
<img src="https://cdn.autotribune.co.kr/news/photo/202304/8017_43246_1529.jpg" onclick="showNextImage()" />
<img src="https://file.mk.co.kr/meet/neds/2023/02/image_readtop_2023_117777_16759917015347929.jpg" onclick="showNextImage()" />
</div>
<script>
const images = document.querySelectorAll('.gallery img');
let currentIndex = 0;
function showNextImage() {
images[currentIndex].style.display = 'none';
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].style.display = 'block';
}
// 처음에 첫 번째 이미지만 보이도록 설정
for (let i = 1; i < images.length; i++) {
images[i].style.display = 'none';
}
</script>
</body>
</html>결과값
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [Html & CSS] 사이즈별 파비콘(favicon) 만드는 방법 !! (0) | 2023.07.25 |
|---|---|
| [Html & CSS] css를 활용하여 움직이는 효과 만드는 방법 !! (0) | 2023.07.24 |
| [Html & CSS] 슬라이드쇼 구현하는 방법 !! (Slick 라이브러리를 활용) (0) | 2023.07.08 |
| [Html & CSS] javascript를 활용하여 input 태그에 엔터키 이벤트 확인하는 방법 !! (0) | 2023.07.07 |
| [CSS] 에러 메세지 Font property font-family does not have generic default 해결 방법 !! (0) | 2023.07.01 |
댓글