2022.02.11 - [멀티캠퍼스 풀스택 과정/프론트엔드] - 프론트엔드4-0.[javascript] 영화포스터 움직이는 바 만들기
프론트엔드4-0.[javascript] 영화포스터 움직이는 바 만들기
웹 창을 열면 바로 움직이다가 끝까지 가면 다시 또 반대쪽으로 움직이고 마우스를 올리면 멈춘다. 구조 구분하기 구조: 전체를 싸고 있는 빨간색 div / 왼쪽 버튼 ◁ 과 오른쪽 버튼 ▷ / 그림 를
everysmallstep.tistory.com
-> 라이브러리 없이 만든 영화포스터 움직이게 하는 것을 jquery를 사용해 좀 더 간단하게 나타낼 수 있다.
1. HTML 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animate</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="javascript.js"></script>
<style>
#imgView {
width:1000px; height:164px;
overflow:hidden;
margin:0 auto;
outline : 1px solid black;
}
div {
width:2320px; height:164px;
}
</style>
</head>
<body>
<div id="imgView">
<div id="imgList"></div>
</div>
</body>
</html>2. js 파일
1. 이미지를 먼저 imgList에 넣기
$(()=>{
// 포스트 이미지 목록 만들기
let tag="";
for(var i=1; i<=20; i++){
tag += "<a href='#'><img src='../postMovie/m";
if(i<10){
tag += "0" + i;
}else {
tag += i;
}
tag += ".png'/></a>";
}
$("#imgList").html(tag);
});
2. 일정시간 간격으로 한 번씩 호출(movieMove( )함수의 구현)
$(()=>{
// 포스트 이미지 목록 만들기
...
// 일정시간 간격으로 한번씩 호출
setInterval("movieMove()",500);
});
function movieMove(){
// 내용 선택자
//$("#imgList>a").last().prependTo("#imgList"); // (1) 오른쪽으로 이동
$("#imgList>a").first().appendTo("#imgList"); //(2) 왼쪽으로 이동
}더보기
(1)번은 선택자 #imgList 맨 뒤에다가 이미지의 맨 앞 내용을 차례대로 붙이는 것
(2)번은 선택자 #imgList 맨 앞에다가 이미지의 맨 뒤 내용을 차례대로 붙이는 것
2022.02.16 - [멀티캠퍼스 풀스택 과정/프론트엔드] - 프론트엔드5-3. jquery 요소의 조작1(추가, 삭제, 변경, 복사)
프론트엔드5-3. jquery 요소의 조작1(추가, 삭제, 변경, 복사)
1. 특정 객체의 내용을 변경하거나 가져오기: html( ) text( ) html( ) text( ) 객체에 html 태그를 추가하거나 객체를 가져올 수 있다. 객체내의 내용을 문자로 추가하거나 얻어올 수 있다. 1. html 파일 객
everysmallstep.tistory.com
'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글
| 프론트엔드6-3. [jquery 예제] review 기능과 게시판 기능 만들기 (0) | 2022.02.17 |
|---|---|
| 프론트엔드6-2. [jquery 예제] jquery를 이용해서 글자 크기 변경 (0) | 2022.02.17 |
| 프론트엔드5-10. jquery animate( ) (0) | 2022.02.17 |
| 프론트엔드5-9. jquery의 effect(숨김,표시)slide, fade (0) | 2022.02.16 |
| 프론트엔드5-8. jquery trigger() (0) | 2022.02.16 |
