7일차 | 퀵메뉴가 있는 슬라이드배너, 좌우,상하,디졸브 슬라이드배너

Sharon kim 2022. 3. 30. 18:56

jquery-ui.js

jquery.js

스크롤메뉴.html, .css, .js

<!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>
    <style>
        *{margin: 0; padding: 0;}
        ul,li{ list-style: none;}
        a{text-decoration: none;}

        #wrap{width: 100%;}
        #header{position: fixed; top:0px; left: 0px; z-index: 9999; opacity: 0.5;
                width: 100%; height: 120px; background-color: blueviolet;}
                #header ul {margin: 0 auto; margin-top:45px ; width: 1000px; height: 30px;}
                #header ul li{ float: left; width: 200px; 
                               text-align: center; line-height: 30px;}
                #header ul li a{ color:#fff; font-size:25px}
                #header ul li.on a{ color:#000; font-size:30px}

        #contents{ width: 100%;}
        #contents > div{ padding-top:120px ; width: 100%; height: 800px;}
        #contents > div.con1{background-color: burlywood;}
        #contents > div.con2{background-color: rgb(33, 216, 192);}
        #contents > div.con3{background-color: rgb(47, 223, 30);}
        #contents > div.con4{background-color: rgb(131, 129, 231);}
        #contents > div.con5{background-color: rgb(150, 46, 119);}

        #q_mn{position: absolute; top:150px; right:50px;
              z-index: 1000;
              width: 60px; height: 140px;
              border-radius: 10px;  
              background-color: cornsilk;}
         #q_mn ul.btns{}
         #q_mn ul.btns li{ margin-bottom: 5px; text-align: center;}
         #q_mn ul.btns li a{ color:#555;}
         #q_mn ul.btns li.on a{ color:darkblue;}
    </style>
    <script> 
     $(document).ready(function(){
       
       var menu = $(".btns li");
       var section = $("#contents > div");

       var h = $(window).height();
       $("#contents > div").height(h);
       $(window).resize(function(){//화면크기 바뀔때 높이 같이 수정
            var h = $(window).height();
            $("#contents > div").height(h);
       });

       menu.click(function(e){
         e.preventDefault();// a태그의  href이벤트를 초기화
         var tg = $(this);
         var i = tg.index();

         var tt = section.eq(i).offset().top;
         $("html,body").stop().animate({scrollTop:tt});
       });

       //메뉴에 addClass로 주석처리
       $(window).scroll(function(){
        var sct = $(window).scrollTop();//현재 화면의 scrollTop를 변수 sct로 사용

        $("#contents > div").each(function(){//contents안에 div를 순서대로 처리
              var tg = $(this); 
              var i = tg.index(); //con1, con2, con3, con4, con5
              if(tg.offset().top <= sct){//해당되는 con들중에 현재 scrollTop에 위치가 동일하다면
                  menu.removeClass("on");//모든메뉴에서 class가 있다 삭제
                  menu.eq(i).addClass("on");       
              }
        });


       });

    
       //퀵메뉴작업
       $(window).scroll(function(){
           var winTop = $(window).scrollTop() + 200;
           $("#q_mn").stop().animate({top:winTop + "px"},500);

       });    


     });//$(document).ready()이벤트 닫기
    </script>
</head>
<body>
    <div id="wrap">
        <div id="header">
        <ul class="btns">
            <li><a href="#con1">con1</a></li>
            <li><a href="#con2">con2</a></li>
            <li><a href="#con3">con3</a></li>
            <li><a href="#con4">con4</a></li>
            <li><a href="#con5">con5</a></li>
        </ul>  
        </div>
        <div id="contents">
           <div class="con1" id="con1">con1</div>
           <div class="con2" id="con2">con2</div>
           <div class="con3" id="con3">con3</div>
           <div class="con4" id="con4">con4</div>
           <div class="con5" id="con5">con5</div>
        </div>
    </div>

    <!--  퀵메뉴 -->
     <div id="q_mn">
         <ul class="btns">
             <li><a href="#con1">con1</a></li>
             <li><a href="#con2">con2</a></li>
             <li><a href="#con3">con3</a></li>
             <li><a href="#con4">con4</a></li>
             <li><a href="#con5">con5</a></li>
         </ul>
     </div>


</body>
</html>

버튼 슬라이드 배너 3종류(좌우 슬라이드, 상하 슬라이드, 디졸브 슬라이드)

jquery-1.9.1.min.js

jquery-ui.js

jquery.js

slidebanner.js(공통)

$(function(){
   var current = 0;//현재 보이는 이미지의 인덱스 0부터
   var setIntervalId;
   //지역변수(특정함수내에서만 존재하는 변수), 
   //전역변수(위치와 상관없이 스크립트 전체에서 사용할 수 있는변수)
   $("#btns > li").eq(0).addClass("on");//첫번째 버튼에 현재 이미지가 보이닌까 주석으로 클래스 적용

   $("#btns > li").click(function(){//
       var i = $(this).index();
       //console.log(i);

       $("#btns > li").removeClass("on");
       $(this).addClass("on");


       move(i);//해당되는 버튼의 번호를 매개변수로 보냄
   });
 
    //left_btn
    $(".l_mn").click(function(){
        var n = current - 1;

        if(n == -1){
            n = 3;
        }

        $("#btns > li").removeClass("on");
        $("#btns > li").eq(n).addClass("on");

        move(n);
        //console.log(current);
    });

    //right_btn
    $(".r_mn").click(function(){
        var n = current + 1;

        if(n == 4){
            n = 0;
        }

        $("#btns > li").removeClass("on");
        $("#btns > li").eq(n).addClass("on");

        move2(n);
        //console.log(current);
    });




   //자동실행되는 함수를 제어
   $("#wrap").on({
       mouseover:function(){
          clearInterval(setIntervalId);;//자동실행을 중지
       },
       mouseout:function(){
          timer();// 자동실행을 위해 자동실행 함수를 호출
       }
   });


   //자동실행
   //setInterval(실행문, 시간) 시간차를 자동으로 실행
   //clearInterval() setInterval()의 중지하는 명령어
   timer();// 함수 호출
   function timer(){
    setIntervalId = setInterval(function(){
        var n = current + 1; //1 2 3 

        if(n == 4){
            n = 0;
        }

        $("#btns > li").removeClass("on");
        $("#btns > li").eq(n).addClass("on");

        move(n);
      },3000)
     
   }

좌우 슬라이드.js

//애니메이션 함수 -왼쪽으로 이동
   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-> 현재 보이는 이미지대상 
   }


   //애니메이션 함수 -오른쪽으로 이동
   function move2(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-> 현재 보이는 이미지대상 
}

상하 슬라이드.js

   //애니메이션 함수 -왼쪽으로 이동
   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({top:"0px"}).animate({top:"-450px"});
       nextEl.css({top:"450px"}).animate({top:"0px"});

      current = n;  //2-> 현재 보이는 이미지대상 
   }


   //애니메이션 함수 -오른쪽으로 이동
   function move2(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({top:"0px"}).animate({top:"450px"});
    nextEl.css({top:"-450px"}).animate({top:"0px"});

   current = n;  //2-> 현재 보이는 이미지대상 
}

디졸브 슬라이드.js

   //애니메이션 함수 -왼쪽으로 이동
   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({opacity:1}).animate({opacity:0});
       nextEl.css({opacity:0}).animate({opacity:1});

      current = n;  //2-> 현재 보이는 이미지대상 
   }


   //애니메이션 함수 -오른쪽으로 이동
   function move2(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({opacity:1}).animate({opacity:0});
    nextEl.css({opacity:0}).animate({opacity:1});

   current = n;  //2-> 현재 보이는 이미지대상 
}

슬라이드배너.html, .css (공통)

<!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; z-index: 400; background-color: blueviolet;}
        #view ul li:nth-child(2){left:0; z-index: 300; background-color: rgb(43, 226, 43);}
        #view ul li:nth-child(3){left:0; z-index: 200; background-color: rgb(208, 226, 43);}
        #view ul li:nth-child(4){left:0; z-index: 100; 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;} 
        #btns li.on{background-color: aqua;}    
        
        .l_mn{width:60px; height: 60px; border:1px solid #000; cursor: pointer;
              position: absolute; top:200px; left:100px ; z-index: 9999;}
        .r_mn{width:60px; height: 60px; border:1px solid #000; cursor: pointer;
              position: absolute; top:200px; right:100px ; z-index: 9999;}
        </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 class="l_mn">left</div>
       <div class="r_mn">right</div>
    </div>
</body>
</html>