jQuery 순차적 접근, 자동롤링
2021. 12. 14. 15:08ㆍStudy/jQuery
HTML
<!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>Untitled Document</title>
<style type="text/css">
*{margin:0; padding:0;}
body{margin:20px;}
ul{list-style:none}
img{border:0}
a{color:#333; text-decoration:none;}
.gallery_box{position:relative; width:200px; height:320px; overflow:hidden; border:5px solid #ccc; padding-top:20px;}
.gallery_box ul span{display:block; height: 40px; line-height: 40px; text-align:center;}
.gallery_box > span{position:absolute; right:10px; top:2px; display:block; width:28px;}
.gallery_box > span a{float:left; display:block; width:14px; height:16px; text-indent:-9999px; overflow:hidden;}
.gallery_box span .leftBtn{ background:url(images/left.jpg)}
.gallery_box span .RightBtn{background:url(images/right.jpg)}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//var timeonoff; //자동기능 구현 변수
//var cnt=true; // true=> 다음, false=>이전
$('.RightBtn').click(function () {
// clearInterval(timeonoff ); //타이머를 멈춘다
$('.gallery_box li').first().appendTo('.gallery_box ul');
// ul(부모)의 자식 li중에서 첫번째 li를 마지막으로 위치 이동.
});
$('.leftBtn').click(function () {
// clearInterval(timeonoff ); //타이머를 멈춘다
$('.gallery_box li').last().prependTo('.gallery_box ul');
// ul(부모)의 자식 li중에서 마지막번째 li를 첫번째로 위치 이동.
});
/*
timeonoff = setInterval(function () {
if(cnt==true){
$('.gallery_box li').first().appendTo('.gallery_box ul');
}else{
$('.gallery_box li').last().prependTo('.gallery_box ul');
}
}, 4000);
*/
});
</script>
</head>
<body>
<div class="gallery_box">
<ul>
<li><a href="#"><img src="images/a1.jpg" alt=""><span>이미지 설명1</span></a></li>
<li><a href="#"><img src="images/a2.jpg" alt=""><span>이미지 설명2</span></a></li>
<li><a href="#"><img src="images/a3.jpg" alt=""><span>이미지 설명3</span></a></li>
<li><a href="#"><img src="images/a4.jpg" alt=""><span>이미지 설명4</span></a></li>
<li><a href="#"><img src="images/a5.jpg" alt=""><span>이미지 설명5</span></a></li>
<li><a href="#"><img src="images/a6.jpg" alt=""><span>이미지 설명6</span></a></li>
</ul>
<span>
<a href="#" class="leftBtn">왼쪽</a>
<a href="#" class="RightBtn">오른쪽</a>
</span>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery 아코디언메뉴 (0) | 2021.12.15 |
|---|---|
| jQuery 순차적 접근 (0) | 2021.12.15 |
| jQuery 객체 배열 팝업 (0) | 2021.12.14 |
| jQuery click pop (0) | 2021.12.14 |
| jQuery layer popup (0) | 2021.12.14 |
