JavaScript
사진 바꾸기
듀듀닷
2022. 1. 18. 18:43
<style>
section img {
max-width: 100%;
}
.center {
margin: 0 auto;
width: 50%;
}
ul {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
}
li {
float: left;
margin-right: 1%;
width:24%;
}
</style>
</head>
<body>
<section class="center">
<div>
<img src="img1.jpg" id="bigimg">
</div>
<ul>
<li><img src="thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li>
<li><img src="thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li>
<li><img src="thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li>
</ul>
</section>
<script>
var thumbs = document.querySelectorAll('.thumb');
for (var i = 0; i < thumbs.length; i++) {
thumbs[i].onclick = function () {
document.getElementById('bigimg').src = this.dataset.image;
// console.log(this.dataset.image);
};
}
</script>
querySelectAll() 메서드
사용법
document.quertSelectAll('클래스명')
dataset 프로퍼티
<태그명 data-이름 = "xxx.img" >
자바스크립트로 속성값 가져오기
형식
가져온요소.dataset.이름