jQuery는 선택하고 실행한다 !
본격적으로 이미지 갤러리
해당 이미지를 클릭할때
1. 메인이미지를 비우고 메인이미지를 현재이미지로 변경한다.
2. 이미 빨간색 테두리가 되어있는 이미지가 있다면 테두리를 없앤다.
3. 현재 클릭한 이미지에 빨간색 테두리를 추가한다.<style>
.images-container img.selected {
border: 3px solid red;
}
</style>
<body>
<div id="main-image-container">
<img src="https://bit.ly/40GBmXE" />
</div>
<div class="images-container">
<img src="https://bit.ly/3L7ccLZ" />
<img src="https://bit.ly/423cWIZ" />
<img src="https://bit.ly/3HCatgX" />
<img src="https://bit.ly/44gNdyL" />
</div>
</body><script>
$(function () {
// images-container 클래스를 가진 div 태그 안에 있는 img 태그들을 선택한다.
imgs = $(".images-container img")
//main컨테이너를 변수에 넣어준다
main = $("#main-image-container")
imgs.click(function(){
var selectedImg = $(this) //img4개중 클릭된 것
main.empty(); //main컨테이너 안 이미지를 일단 지워준다.
selectedImg.clone().appendTo(main);
//그냥 appendTo를 하면 이미지가 교체되서 사라짐.
//선택된이미지를 클론하고 main의 자식으로 넣어준다.
$("img.selected").removeClass("selected");
selectedImg.addClass("selected");
})
});
</script>
👩💻안녕하세요🌞