<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
img{
width : 250px;
height : 200px;
}
</style>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('button').click(function() {
//$('img').first().appendTo('body')
$('img').last().prependTo('body')
})
})
</script>
</head>
<body>
<img src="/Lecture-WEB/html/images/추노1.jpg">
<img src="/Lecture-WEB/html/images/추노2.jpg">
<img src="/Lecture-WEB/html/images/추노3.png">
<img src="/Lecture-WEB/html/images/추노4.png">
<br>
<button>클릭</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
img{
width : 250px;
height : 200px;
}
</style>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('button').click(function() {
$('img').first().appendTo('body')
//$('img').last().prependTo('body')
})
})
</script>
</head>
<body>
<button>클릭</button>
<br>
<img src="/Lecture-WEB/html/images/추노1.jpg">
<img src="/Lecture-WEB/html/images/추노2.jpg">
<img src="/Lecture-WEB/html/images/추노3.png">
<img src="/Lecture-WEB/html/images/추노4.png">
</body>
</html>setInterval 함수를 통해, 주기적으로 사진위치를 바꿀 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
img{
width : 250px;
height : 200px;
}
</style>
<style>
img {
width: 150px;
height: 120px;
/* margin-right : -10px; */
float : left; /* 이미지를 margin 없이 바짝 붙인다 */
}
button{
float : left;
height : 120px;
}
</style>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
//next 버튼 구현
$('#nextBtn').click(function(){
$('img').last().prependTo('span')
})
//prev 버튼 구현
$('#prevBtn').click(function(){
$('img').first().appendTo('span')
})
//자동으로 next 하기
setInterval(function() {
$('#nextBtn').trigger('click')
}, 1000)
})
</script>
</head>
<body>
<button id="prevBtn">PREV</button>
<span>
<img src="/Lecture-WEB/html/images/추노1.jpg">
<img src="/Lecture-WEB/html/images/추노2.jpg">
<img src="/Lecture-WEB/html/images/추노3.png">
<img src="/Lecture-WEB/html/images/추노4.png">
</span>
<button id="nextBtn">NEXT</button>
</body>
</html>'웹 프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] sendProcess를 쉽게 사용: $.ajax(); (0) | 2020.07.28 |
|---|---|
| [jQuery] bxslider 라이브러리를 활용하여 이미지 슬라이더 만들기 (0) | 2020.06.24 |
| [jQuery] 태그 인덱싱 (0) | 2020.06.24 |
| [jQuery] 형제 CSS 설정 : siblings, next, nextUntil, prev, prevUtill, prevAll (0) | 2020.06.24 |
| [jQuery] 부모, 선조, 자식, 후손 CSS 설정 : parent, parents, children, find, filter (0) | 2020.06.24 |
