코리아 IT아카데미/Javascript·Jquery~~~
6일차 | 자동 슬라이드 배너, 자식부모관계, 박스사이즈, 스크롤값, 드래그값
Sharon kim
2022. 3. 17. 15:21
[jquery 파일]
jquery-1.9.1.min.js
jquery-ui.js
jquery.js
slidebanner.js
$(function(){
var current = 0;//현재 보이는 이미지의 인덱스 0부터
$("#btns > li").click(function(){//3
//console.log(i);
move(i);//해당되는 버튼의 번호를 매개변수로 보냄
});
//자동실행
//setInterval(실행문, 시간)
timer();// 함수 호출
function timer(){
setInterval(function(){
var n = current + 1; //1 2 3
if(n == 4){
n = 0;
}
move(n);
},2000)
}
//애니메이션 함수
function move(n){//1
if(current == n) return; //2
var currentEl = $("#view ul li").eq(current);//0 1 2 3
var nextEl = $("#view ul li").eq(n);
currentEl.css({left:"0%"}).animate({left:"-100%"});
nextEl.css({left:"100%"}).animate({left:"0%"});
current = n; //2-> 현재 보이는 이미지대상
}
});
슬라이드배너.html
<!DOCTYPE html>
<html lang="en">
<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>슬라이드 배너</title>
<script src="js/jquery.js"></script>
<script src="js/slidebanner.js"></script>
<style>
*{margin: 0; padding: 0;}
ul, li{list-style: none;}
a{text-decoration: none;}
#wrap{ width: 100%; height: 450px; position: relative;}
#view{width: 100%; height: 450px; position: relative; overflow: hidden;}
#view ul{}
#view ul li{width: 100%; height: 450px; position: absolute; top:0;
font-size: 300px; color:#fff;}
#view ul li:nth-child(1){left:0; background-color: blueviolet;}
#view ul li:nth-child(2){left:100%; background-color: rgb(43, 226, 43);}
#view ul li:nth-child(3){left:200%; background-color: rgb(208, 226, 43);}
#view ul li:nth-child(4){left:300%; background-color: rgb(96, 153, 238);}
#btns{position: absolute;
left: 50%; bottom:50px; z-index: 1000;
margin-left: -45px; }
#btns li{width: 15px; height: 15px; border-radius: 50%;
background-color: azure; float: left;
text-align: center; line-height: 15px;
margin-right: 10px; cursor: pointer;}
#btns li:hover{background-color: aqua;}
</style>
</head>
<body>
<div id="wrap">
<!-- 화면에 보여질 이미지그룹 -->
<div id="view">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
<!-- 이미지들을 제어할 버튼그룹 -->
<ul id="btns">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>[jquery 파일]
jquery-1.9.1.min.js
jquery-ui.js
jquery.js
01.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
var el = $(".list");
//el 자식들중에서 맨앞부분에 태그를 추가
el.prepend('<li style="color:blue">3-0</li>');
//el 자식들중에서 마지막부분에 태그를 추가
el.append('<li style="color:red">3-5</li>');
//el 요소를 기준으로 해서 이전에 태그를 추가
el.before('<h2>el을 기준으로 이전위치에 추가된 태그</h2>');
//el 요소를 기준으로 해서 다음에 태그를 추가
el.after('<h2>el을 기준으로 다음위치에 추가된 태그</h2>');
//추가된 태그 삭제
$("input").click(function(){
$("h2").remove();
});
});
</script>
</head>
<body>
<ul class="list">
<!-- <li>3-0</li> 추가 -->
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<!-- <li>3-5</li> 추가 -->
</ul>
<input type="button" value="태그삭제">
</body>
</html>
02.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
var el = $(".list");
//prependTo() el라는 부모아래에 자식들 앞부분으로 이동
$(".li01").prependTo(el);
//appendTo() el라는 부모아래에 자식들 마지막 부분으로 이동
$(".li04").appendTo(el);
//특정 태그를 복사 clone()
var cloneEl = $(".list > li").clone();
console.log(cloneEl);
$(".copy").append(cloneEl);
});
</script>
</head>
<body>
<ul class="list">
<!-- <li>3-0</li> 추가 -->
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<!-- <li>3-5</li> 추가 -->
</ul>
<ul class="copy" style="border: 1px solid #000;">
<!--.list의 li태를 복사해서 이곳으로 붙이기 -->
</ul>
</body>
</html>
03.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
//var tagbox = $("#hidden").html(); 특정요소를 html타입으로 변수에 대입
//$("#wrapper").html(tagbox) html타입으로 적용
//$("#wrapper").html($("#hidden").html());
//$("#hidden").css("display","none");
//var txtbox = $("#hidden").text(); 특정요소를 text타입으로 변수에 대입
//$("#wrapper").text(tagbox) text타입으로 적용
$("#wrapper").text($("#hidden").text());
});
</script>
</head>
<body>
<div id="wrapper" style="border:1px solid blue; padding:20px; margin:20px; font-size:20px;">
<span>이곳의 내용을 바꿔 주세요.</span>
</div>
<div id="hidden">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
너비와 높이 읽어오기.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
var box = $("#wrapper");
$(window).resize(function(){
$("#width").text(box.width());
$("#height").text(box.height());
$("#innerWidth").text(box.innerWidth());
$("#innerHeight").text(box.innerHeight());
});
});
</script>
</head>
<body>
<div id="wrapper" style="border: 5px solid blue; padding:30px; margin:20px; font-size:20px;">
<span>박스의 width = </span><span id="width">0</span><br>
<span>박스의 height = </span><span id="height">0</span><br>
<span>박스의 innerWidth = </span><span id="innerWidth">0</span><br>
<span>박스의 innerHeight = </span><span id="innerHeight">0</span><br>
</div>
</body>
</html>
스크롤위치읽어오기.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* { margin:0; padding:0; }
#wrapper { position: absolute; width:500px; height:500px; border:3px solid blue; left:100px; top:150px; }
#box { position:absolute; width:100px; height:100px; left:50px; top:50px; background:red; color:white;}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(document).ready(function(){
// 화면에 대한 이벤트
// ready() 화면을 다 읽어드리고 실행
// load() 특정 태그가 다 읽어지면 실행
// resize() 화면의 크기가 바뀔때마다 실행
// scroll() 화면의 스크롤 움직일때마다 실행
$(window).on('scroll', function(){
var scl = $(window).scrollLeft();
var sct = $(window).scrollTop();
$("#wrap").find(".scrollLeft").text(scl);
$("#wrap").find(".scrollTop").text(sct);
});
});
</script>
</head>
<body style="width: 200%; height: 3000px;">
<div id="wrap" style="position: fixed; top:0; left:0;">
<p>scrollLeft = <span class="scrollLeft">0</span> </p>
<p>scrollTop = <span class="scrollTop">0</span> </p>
</div>
</body>
</html>
엘리먼트 위치 읽어오기.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* { margin:0; padding:0; }
#wrapper { position: absolute; width:500px; height:500px; border:3px solid blue; left:100px; top:150px; }
#box { position:absolute; width:100px; height:100px; left:50px; top:50px; background:red; color:white;}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#box").draggable({
drag:function(){
// $("#box")를 기준으로 left, top값을 화면 글자로 출력
$("#position_info").find('.ol').text($("#box").offset().left);
$("#position_info").find('.ot').text($("#box").offset().top);
// $("#box")의 부모를 기준으로 left, top값을 화면 글자로 출력
$("#position_info").find('.pl').text($("#box").position().left);
$("#position_info").find('.pt').text($("#box").position().top);
}
});
});
// $("#box").draggable({
// drag:function(){}
// })
</script>
</head>
<body>
<div id="position_info">
<span>offset().left = </span><span class="ol">0</span><br>
<span>offset().top = </span><span class="ot">0</span><br>
<span>position().left = </span><span class="pl">0</span><br>
<span>position().top = </span><span class="pt">0</span><br><br>
<span>box를 이동해보세요.</span>
</div>
<div id="wrapper">
<div id="box"><span>box</span></div>
</div>
</body>
</html>