본문 바로가기
코리아 IT아카데미/Javascript·Jquery~~~

6일차 | 자동 슬라이드 배너, 자식부모관계, 박스사이즈, 스크롤값, 드래그값

by Sharon kim 2022. 3. 17.

[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>

 

'코리아 IT아카데미 > Javascript·Jquery~~~' 카테고리의 다른 글

8일차 | 애니메이션과 css차이, 가로스크롤메뉴, 마우스 따라 움직이는 네비게이션바,toggle, tooltip 도움말 효과  (0) 2022.03.30
7일차 | 퀵메뉴가 있는 슬라이드배너, 좌우,상하,디졸브 슬라이드배너  (0) 2022.03.30
5일차 | 기본적인 갤러리, 일반적인 슬라이드 갤러리  (0) 2022.03.17
4일차 | jquery(가로메뉴, 세로메뉴 , 애니메이션, 풀다운 메뉴)  (0) 2022.03.17
3일차 | Jquery(가로메뉴, 마우스 hover, 선택자, 제이쿼리 함수)  (0) 2022.03.16

관련글

티스토리툴바