고정 헤더 영역
상세 컨텐츠
본문
- 이미지를 클릭할 때마다 해당 폴더 내의 다음 이미지로 넘어가는 예제입니다.
- 애니메이션을 부여하여 부드럽게 전환되도록 할 수 있습니다.
- 이미지가 만료되면 처음으로 돌아갑니다.
- 이미지는 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 안내]
- 해당 예제는 espriter_practice/WebContent/'03_08_jQuery_tutorial2 ' 에 있습니다.
본 포스팅은 IT 교육기관인 KIC 캠퍼스에서 공부하며 작성한 리포트입니다.
혹시 잘못된 내용이 있거나 문제 소지시 댓글 남겨주시면 조치하겠습니다.
'Development > JS' 카테고리의 다른 글
| jQuery - JSON 데이터를 호출하고 검색 건수 확인 예제 (0) | 2018.03.08 |
|---|---|
| jQuery - Ajax 전담 메소드를 활용하여 json,xml 읽기 예제 (0) | 2018.02.28 |
| jQuery - Ajax로 자료 읽기 예제 (0) | 2018.02.28 |
| jQuery - jQuery 기본 예제 #8 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #7 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #6 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #5 (0) | 2018.02.27 |
댓글 영역