[jQuery] 복습 예제 : append(), prepend() 를 이용한 이미지 순환 갤러리 만들기 (간단)

JQUERY/소스코드 2015. 10. 13. 21:28

728x90

[참고] 관련포스트

[jQuery] jQuery Manipulation(조작) API - DOM 요소에 추가/삭제 관련

jQuery append() 메서드와 prepend() 메서드

append() 메서드는 선택된 요소의 내부에 가장 뒤에 매개변수로 전달되는 HTML 문자열, <DOM> 요소 등을 추가해주는 함수입니다.

prepend() 메서드는 선택된 요소의 내부에 가장 앞에 매개변수로 전달되는 HTML 문자열, <DOM> 요소 등을 추가해주는 함수입니다.

[코드]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>DOM 변경 : prepend(), append()</title>
<style>
body {
    font-family: "맑은 고딕";
}
#container {
    width:500px;
}
img {
    margin: 5px;
    padding: 0px;
    width:200px;
}
button {
    margin-right: 5px;
    padding: 5px 15px;
    font-family: "맑은 고딕";
    background: #666;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}
</style>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

<body>
<div id="container">
    <img src="images/pic_1.jpg">
    <img src="images/pic_2.jpg">
    <img src="images/pic_3.jpg">
    <img src="images/pic_4.jpg">
</div>
<p>append, prepend를 사용하여 사진을 순환합니다.</p>
<button id="prepend" title="prepend">prepend</button>
<button id="append" title="append">append</button>

<script>

// append() 메서드는 선택된 요소의 내부에 가장 뒤에 매개변수로 전달되는 HTML 문자열,
// <DOM> 요소 등을 추가해주는 함수입니다.
// prepend() 메서드는 선택된 요소의 내부에 가장 앞에 매개변수로 전달되는 HTML 문자열,
// <DOM> 요소 등을 추가해주는 함수입니다.

//맨 뒤에 있는 이미지를  맨 앞에 추가
$("button#prepend").click(function(){
    $("div#container").prepend($("div#container img:last"));
});

//맨 앞에 있는 이미지를 맨뒤에 추가
$("button#append").click(function(){
    $("div#container").append($("div#container img:first"));
});
</script>
</body>
</html>

[출처] [jQuery] 복습 예제 : append(), prepend() 를 이용한 이미지 순환 갤러리 만들기 (간단)|작성자 자바킹

728x90

저작자표시

'JQUERY > 소스코드' 카테고리의 다른 글

jquery의 html(), append(), prepend()를 이용해 html 추가하기 (0)	2015.10.15
Jquery 웹개발시 F1 키 도움말 막고 단축키로 사용하기 (0)	2015.10.15
제이쿼리 팝업 자식창에서 부모창 값 전달 (아이디,함수실행) (0)	2015.10.13
[jQuery] append(), prepend(), after(), before() (0)	2015.10.13
20강. jquery - 좌우스크롤,eq,length,scrollLeft.left (0)	2015.10.13
jquery index(eq,lt,gt,even,odd,first,last,not) 예제 (0)	2015.10.13
jQuery input name으로 선택 (0)	2015.10.13
[jQuery] 페이지 이동없이 ajax로 파일 업로드 하기 / ajaxForm() (0)	2015.10.08

nineDeveloper

안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!

160x600