jQuery 간단 갤러리 index
2021. 12. 7. 15:54ㆍStudy/jQuery
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단 갤러리</title>
<style>
*{margin: 0; padding: 0;}
body{font-family:'Spoqa Han Sans Neo'; font-size: 16px; color:#333; line-height:1.6;}
a{color:inherit; text-decoration:none;}
ul, li{list-style:none;}
img{vertical-align:top;}
.gallery{width: 400px; padding: 15px; border: 1px solid #ccc;; margin: 30px;}
.gallery .image li{display: none;}
.gallery .btn{overflow:hidden;}
.gallery .btn li{float: left; width: 25%;}
.gallery .btn li a{display:block; text-align: center; padding: 10px 0;}
</style>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('.image li:eq(0)').fadeIn('slow');
$('.btn li:eq(0)').children('a').css('color','red').css('background','yellow');
$('.btn li a').click(function(){
var ind = $(this).index('.btn a'); // 0 1 2 3
$('.image li').hide(); // 다 닫아준 후
$('.image li:eq('+ ind +')').fadeIn('slow'); // index값이 같은 li만 열기
$('.btn li a').css('color','#333').css('background','#fff');
$(this).css('color','red').css('background','yellow');
});
});
</script>
</head>
<body>
<div class="gallery">
<ul class="image">
<li><img src="./images/img1.jpg" alt=""></li>
<li><img src="./images/img2.jpg" alt=""></li>
<li><img src="./images/img3.jpg" alt=""></li>
<li><img src="./images/img4.jpg" alt=""></li>
</ul>
<ul class="btn">
<li><a href="#">이미지1</a></li>
<li><a href="#">이미지2</a></li>
<li><a href="#">이미지3</a></li>
<li><a href="#">이미지4</a></li>
</ul>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery ex animate (0) | 2021.12.08 |
|---|---|
| jQuery animate() feat.easing (0) | 2021.12.08 |
| jQuery 시각효과 (0) | 2021.12.07 |
| jQuery EVENT Bubbling , this (0) | 2021.12.07 |
| jQuery toogle 더보기 (0) | 2021.12.07 |
