jQuery_imageMove

삼전·2023년 5월 30일
0

jQuery

목록 보기
9/15

setInterval('호출할 함수', 밀리 세컨드): 밀리 세컨드 간격으로 함수를 계속 호출!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN으로 jQuery 라이브러리 연결하기 - https://cdnjs.com/libraries/jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
	#list>img{width:100px; height:100px; }
</style>

</head>
<body>
	<!-- 스페이스 한 번은 인식되어 사진사이 '공간'을 차지한다. -->
	<div>
		<div id="list">
			<img src="../img/swisda.jpg" />
			<img src="../img/blueButton.png" />
			<img src="../img/jeju.png" />
			<img src="../img/natural04.png" />
		</div>
	</div>
	<script>
		$(function(){
			setInterval('imgMove()',1000);
		});
       //** 함수 실행 시 첫 번째 이미지가 list 자손 중 마지막으로 이동 **
		function imgMove(){
			$("#list>img").first().appendTo("#list");

		}
	
	</script>
</body>
</html>
profile
풀스택eDot

0개의 댓글