상세 컨텐츠

본문 제목

jQuery - jQuery 기본 예제 #8

Development/JS

by 에스프리터 2018. 2. 27. 18:26

본문

- 이미지를 클릭할 때마다 해당 폴더 내의 다음 이미지로 넘어가는 예제입니다.
- 애니메이션을 부여하여 부드럽게 전환되도록 할 수 있습니다.
- 이미지가 만료되면 처음으로 돌아갑니다.
- 이미지는 image 폴더 안에 들어있습니다.


↓  ↓   <시작 | 파일명 파일명 : jq8.html > ↓  ↓ 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.imag{position :absolute;
     top: 10px;
     left: 10px;
} /* absolute:절대위치, relative: 상대위치, fixed : 고정위치 */
</style>
<script type="text/javascript">
$(document).ready(function(){
     $(".imag").hide();
     $(".imag:first").fadeIn('slow');
     
     var next;
     $(".imag").click(function(event){
          $(this).fadeIn('slow');
          //alert($(this).next().length);
          next = ($(this).next().length)?$(this).next():$(".imag:first");
          $(this).fadeOut('slow'); // 현재 이미지 숨기기
          next.fadeIn('slow'); // 다음 이미지 출현
          event.preventDefault(); // 웹의 초기화 해제
     });
});
</script>
</head>
<body>
     <a class="imag" href="">
     <img src="image/1.jpg" width="300" height="300">
     </a>
     
     <a class="imag" href="">
     <img src="image/2.jpg" width="300" height="300">
     </a>
     
     <a class="imag" href="">
     <img src="image/3.jpg" width="300" height="300">
     </a>
     
     <a class="imag" href="">
     <img src="image/4.jpg" width="300" height="300">
     </a>
     
     <a class="imag" href="">
     <img src="image/1.jpg" width="300" height="300">
     </a>
</body>
</html>
↑  ↑ ↑   <종료 | 파일명 파일명 : jq8.html ↑  ↑ ↑ 

[ Console 결과]



[Github 안내] 
- Github에서 파일을 확인하시려면 바로가기를 눌러주세요.
- 해당 예제는 espriter_practice/WebContent/'03_08_jQuery_tutorial2 ' 에 있습니다.


본 포스팅은 IT 교육기관인 KIC 캠퍼스에서 공부하며 작성한 리포트입니다.
혹시 잘못된 내용이 있거나 문제 소지시 댓글 남겨주시면 조치하겠습니다.



태그

관련글 더보기

댓글 영역