자바스크립트 (3)

jQuery(제이쿼리) : javascript의 라이브러리

라이브러리 

컴퓨터 프로그램에서 자주 사용되는 부분 프로그램들을 모아 놓은 것. 

언제든지 자유롭게 이용할 수 있는 구성 

 

즉, 사용하기 편한 프로그램(코드)의 모임 

 

let no;

    $(function(){

        $(".menu li").on("click",function(){

            no=$(this).index()

            console.log(no);

            $(".text").text(menu_textA[no]);

        })

    })

menu li 6개중 선택한 (this)

 

    $(".prevB").on("click", function () {

        if (count > 1) {

            count--;

            $(".disp").text(count + " / 6");

            $("#pic").attr("src", "img/img" + count + ".jpg")

            $("#text3").text("영양 : " + calA[count-1] + "kal");

           

        }

   

    })

    $(".nextB").on("click", function () {

        if (count < 6) {

            count++;

            $(".disp").text(count + " / 6");

            $("#pic").attr("src", "img/img" + count + ".jpg")

            $("#text3").text("영양 : " + calA[count-1] + "kal");

        }

    })

 

 

메뉴 선택 시 설명 바뀌기

 

const textA = ["영화채널입니다",

    "극장을 선택하세요",

    "예매버튼을 클릭하세요",

    "스토어에 입장하셨습니다",

    "현재 진행중인 이벤트는 없습니다",

    "혜택화면"]

let no;

window.onload = function () {

    $("nav div").on("click", function () {

        no=$(this).index();

        $("#title").text(textA[no])

    })

그림 불러오기 

<ul id="imgs">

        <li class="img0 img"></li>

        <li class="img1 img"></li>

        <li class="img2 img"></li>

        <li class="img3 img"></li>

        <li class="img4 img"></li>

    </ul>

js

    for (i = 0; i < posterA.length; i++) {

        $("#imgs li:eq(" + i + ")").css("background", "url(img/" + posterA[i] + ")")

            .css("backgroudSize", "100% 100%");

    }

 

    $("#imgs li").hide();   //불러온 이미지 가리기

    $("#imgs li:eq(0)").show();   //지정한 이미지 보이기

클릭한 메뉴에 따라 내용 바꾸기

    $("nav div").on("click", function () {

        no = $(this).index();

        $("#title").text(textA[no])

    })

그림 불러와서 바꾸기

$("#left").on("click", function () {                // count = 0;

        if (count > 1) {

            count--;

            $("#no").text(count + " / 5");

            $(".num").text(count)

            $("#imgs li").hide();   //불러온 이미지 가리기

            $("#imgs li:eq("+(count-1)+")").show();   //불러온 이미지 가리기

        }else

        count=6;

클릭하면 버튼 배경 색 바뀌기

 

 

    $(".opt li").on("click",function(){

        $(".opt li").css("background","white");

        no = $(this).index();

        $(".opt li:eq("+ no + ")").css("background","red");

    })

---

jQuery

 

    $(".opt li").on("click",function(){

 

        no = $(this).index();

 

        $(".opt li").css("background","white");

        $(".opt li:eq("+ no + ")").css("background","red");

        $(".big div").hide();

        $(".big div:eq("+ no +")").show();

    })

 

글 연결하기

    $(".big div").hide();

        $(".big div:eq("+ no +")").show();

 

js

    let opt;

    big=document.querySelector(".big").getElementsByTagName("div");

    opt=document.querySelector(".opt").getElementsByTagName("li");

    opt[0].addEventListener("click",function(){

        for(i=0; i < big.length; i++){

            big[i].style.display = "none"

        }

        big[0].style.display="block";

    })

    opt[1].addEventListener("click",function(){

        for(i=0; i < big.length; i++){

            big[i].style.display = "none"

        }

        big[1].style.display="block";

    })

   

    opt[2].addEventListener("click",function(){

        for(i=0; i < big.length; i++){

            big[i].style.display = "none"

        }

        big[2].style.display="block";

    })

   

    opt[3].addEventListener("click",function(){

        for(i=0; i < big.length; i++){

            big[i].style.display = "none"

        }

        big[3].style.display="block";

   

    })

---

    //문제 4 아래 옵션 클릭하면 해당하는대용

        //.big 안에 div태그에 for문으로 [배열]에서 그림가져다 넣기

   

let big, opt;

    for (i = 0; i < posterB.length; i++) {

        let big = document.querySelector(".big").getElementsByTagName("div");

        big[i].style.background = "url(img/" + posterB[i] + ")";

        big[i].style.backgroundSize=("100% 100%");

    }

 

---

      //시간 초로 그림 넘기기

 

et timer = setInterval("show()", 3000);

let cnt = 0;

function show() {

    if (cnt >= 5)

        cnt = 1;

    else

        cnt++;

    // console.log(cnt);

    $(".big div").hide();

    $(".big div:eq("+cnt+")").show();

    $(".num").text(cnt);

    $(".big div").hide();

    $(".big div:eq("+(cnt-1)+ ")").show();

}

setinterval 시간초 재기 그림 넘기기

 

---

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

    <link rel="stylesheet" href="css/index.css">

    <link rel="stylesheet" href="css/comm.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

    <script src="javascript/index.js"></script>

</head>

<body>

    <nav>

        <div class="menu">영화</div>

        <div class="menu">극장</div>

        <div class="menu">예매</div>

        <div class="menu">스토어</div>

        <div class="menu">이벤트</div>

        <div class="menu">혜택</div>

    </nav>

    <div id="title">메뉴 선택 설명</div>

    <ul id="imgs">

        <li class="img0 img">0</li>

        <li class="img1 img">1</li>

        <li class="img2 img">2</li>

        <li class="img3 img">3</li>

        <li class="img4 img">4</li>

    </ul>

    <ul id="btn">

        <li id="left">◀</li>

        <li id="no">1 / 5</li>

        <li id="right">▶</li>

    </ul>

    <ul class="select">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

    <p class="num">1</p>

    <div class="big">

        <div class="big1">그림 - 1</div>

        <div class="big2">그림 - 2</div>

        <div class="big3">그림 - 3</div>

        <div class="big4">그림 - 4</div>

    </div>

    <ul class="opt">

        <li class="opt1">1</li>

        <li class="opt2">2</li>

        <li class="opt3">3</li>

        <li class="opt4">4</li>

    </ul>

    <p class="screen">

       

    </p>

</body>

</html>

css

* {

    margin: 0; padding: 0;

    box-sizing: border-box;

    list-style: none;

}

nav {

    width: 80%; height: 70px;

    background: #f2f2f2;

    margin: 0 auto;

    display: flex;

    justify-content: center;

}

nav div {

    width: 7%; cursor: pointer;

    border: 1px solid white;

    text-align: center; line-height: 70px;

}

#title {

    width: 80%; height: 50px;

    border-bottom: 1px solid #ccc;

    margin: 0 auto;

    text-align: center; line-height: 50px;

}

#imgs {

    width: 80%; height: 600px;

    margin: 0 auto;

    border: 1px solid black;

    position: relative;  top: 0;  left: 0;

   

}

#imgs li {

    width: 100%; height: 100%;

    position: absolute;  top: 0; left: 0;

    /* background: white;  */

   

   

    line-height: 1100px; font-size: 1rem;

    color: white;

}

#btn {

    width: 200px; height: 50px;

    margin: 0 auto;

    border: 0px solid blue;

    display: flex;

}

#btn li {

    flex: 1;

    text-align: center; line-height: 50px;

    font-size: 1.5rem; cursor: pointer;

   

}

.select {

    position: absolute;

    top: 690px; left: 0;

    width: 100%; height: 30px;

    border: 0px solid black;

    display: flex;

    justify-content: center;

   

}

.select li {

    color:  white;

    width: 30px; height: 100%;

    border: 1px solid wheat;

    border-radius: 100%;

    text-align: center;

    line-height: 30px;

    margin-right: 10px;

}

.num {

    width: 100px; height: 50px;

    margin: 50px auto;

    border: 1px solid red;

    text-align: center; font-size: 2rem;

    line-height: 50px;

}

.big {

    position: relative;

    top: 0; left: 0;

    width: 300px; height: 500px;

    margin: 50px auto;

    border: 0px solid black;

    border-radius: 20px;

}

.big div {

    position: absolute;

    top: 0; left: 0;

    width: 100%; height: 100%;

    border-radius: 20px;

    font-size: 3rem;

    display: none;

}

.big .big4 {

    display: block;

}

.opt {

    cursor: pointer;

    position: absolute;

    top: 950px; left: 50%;

    transform: translateX(-50%);

    width: 150px;

    height: 30px;

    border: 0px solid red;    

    display: flex;

    justify-content: space-between;

}

.opt li {

    width: 30px; height: 30px;

    border: 1px solid red;

    background: white;

    border-radius: 100%;

    text-align: center;

    line-height: 30px;

}

.opt li:hover{

    background-color: gray;

}

js

//배열 설정

const textA = ["영화채널입니다",

    "극장을 선택하세요",

    "예매버튼을 클릭하세요",

    "스토어에 입장하셨습니다",

    "현재 진행중인 이벤트는 없습니다",

    "혜택화면"]

const posterA = [

    "big0.jpg", "big1.jpg", "big2.jpg",

    "big3.jpg", "big4.jpg"

]

const movieA = ["콘크리트 유토피아", "현대차 제네시스 미국 탑으로 실적 호조",

    "흰색 자동차", "자동차차차", "자동차4"]

const posterB = ["img0.jpg", "img1.jpg", "img2.jpg", "img3.jpg"]

// 타이머 설정 (그림 자동 바뀜)

let timer = setInterval("show()", 3000);

let cnt = 0;

function show() {

    if (cnt >= 5)

        cnt = 1;

    else

        cnt++;              //5 이상이면 1로 복구

    // console.log(cnt);

    $(".big div").hide();

    $(".big div:eq(" + cnt + ")").show();

    $(".num").text(cnt);

    $(".big div").hide();

    $(".big div:eq(" + (cnt - 1) + ")").show();         //시간초 그림 넘기기

}

let no;

window.onload = function () {

 //아이디 #imgs에 그림 5개 배경그림으로 넣기

    for (i = 0; i < posterA.length; i++) {

        $("#imgs li:eq(" + i + ")").css("background", "url(img/" + posterA[i] + ")")

            .css("backgroundSize", "100% 100%");

    }

    //문제 4 아래 옵션 클릭하면 해당하는대용

    //.big 안에 div태그에 for문으로 [배열]에서 그림가져다 넣기(jsp)

    let big, opt;

    for (i = 0; i < posterB.length; i++) {

        let big = document.querySelector(".big").getElementsByTagName("div");

        big[i].style.background = "url(img/" + posterB[i] + ")";

        big[i].style.backgroundSize = ("100% 100%");

    }

    //#imgs에 그림 5개 모두 안보이게 해 놓고 첫 번째[0] 그림만 보이기

    $("#imgs li").hide();         //불러온 이미지 가리기

    $("#imgs li:eq(0)").show();   //지정한 이미지 보이기

   

    //옵션 버튼 첫 번째[0] 옵션 버튼

    $(".select li:eq(0)").css("background", "orange").css("color", "white");

    $("#imgs li:eq(0)").text(movieA[0]);

    //클릭하는 버튼의 텍스트 불러오기

    $("nav div").on("click", function () {

        no = $(this).index();

        $("#title").text(textA[no])

    })

    let count = 0;

    //화살표 모양을 누르면  그림 증가 하기

    $("#right").on("click", function () {

        if (count < 4) {

            count++;

            $("#no").text(count + " / 5");

            $(".num").text(count)

            $("#imgs li").hide();                           //불러온 이미지 가리기

            $("#imgs li:eq(" + (count - 1) + ")").show();   //불러온 이미지 가리기

            $("#imgs li:eq(" + (count - 1) + ")").text(movieA[count - 1])

            $(".select li").css("background", "none");

            $(".select li:eq(" + (count - 1) + ")").css("background", "orange");

        } else

            count = 0;

    })

   

    //그림 감소하기

    $("#left").on("click", function () {

        if (count > 1) {

            count--;

            $("#no").text(count + " / 5");

            $(".num").text(count)

            $("#imgs li").hide();                            //불러온 이미지 가리기

            $("#imgs li:eq(" + (count - 1) + ")").show();   //불러온 이미지 가리기

            $(".select li").css("background", "none");

            $(".select li:eq(" + (count - 1) + ")").css("background", "orange");

        } else

            count = 6;

    })

    // .big에 버튼 클릭하면 색 바뀌기, 그림 보여주기

    $(".opt li").on("click", function () {

        no = $(this).index();

        $(".opt li").css("background", "white");

        $(".opt li:eq(" + no + ")").css("background", "red");

        $(".big div").hide();

        $(".big div:eq(" + no + ")").show();

    })

    /* js 버전  버튼 선택 시 그림 바뀌기

    let opt;

    big=document.querySelector(".big").getElementsByTagName("div");

    opt=document.querySelector(".opt").getElementsByTagName("li");

    opt[0].addEventListener("click",function(){

        for(i=0; i < big.length; i++){

            big[i].style.display = "none"

        }

        big[0].style.display="block";

    })

    opt[1].addEventListener("click",function(){

        for(i=0; i < big.length; i++){

            big[i].style.display = "none"

        }

        big[1].style.display="block";

    })

   

    opt[2].addEventListener("click",function(){

        for(i=0; i < big.length; i++){

            big[i].style.display = "none"

        }

        big[2].style.display="block";

    })

   

    opt[3].addEventListener("click",function(){

        for(i=0; i < big.length; i++){

            big[i].style.display = "none"

        }

        big[3].style.display="block";

   

    })*/

}

---

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

    <link rel="stylesheet" href="css/index.css">

    <link rel="stylesheet" href="css/comm.css">

    <link rel="stylesheet" media="screen and (max-width:700px)" href="css/index_m.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script src="javascript/index.js"></script>

</head>

<body>

    <header>

        Title

    </header>

    <section class="sec1">

        <ul class="box">

            <li class="box0"></li>

            <li class="box1"></li>

            <li class="box2"></li>

            <li class="box3"></li>

            <li class="box4"></li>

        </ul>

        <ul class="box_text">

            <li class="box_text1">

                <p>아름다운 이미지</p>

                <p>최고의 선물</p>

                <p>2022년 3월 30일</p>

            </li>

            <li class="box_text2">

                <p>아름다운 이미지</p>

                <p>최고의 선물</p>

                <p>2022년 3월 30일</p>

            </li>

            <li class="box_text3">

                <p>아름다운 이미지</p>

                <p>최고의 선물</p>

                <p>2022년 3월 30일</p>

            </li>

            <li class="box_text4">

                <p>아름다운 이미지</p>

                <p>최고의 선물</p>

                <p>2022년 3월 30일</p>

            </li>

            <li class="box_text5">

                <p>아름다운 이미지</p>

                <p>최고의 선물</p>

                <p>2022년 3월 30일</p>

            </li>

        </ul>

    </section>

    <section class="wrap">

        <div class="sec2">

            <div class="img0"></div>

            <div class="img1"></div>

            <div class="img2"></div>

            <div class="img3"></div>

        </div>

    </section>

    <ul class="btn">

        <li class="left">◀</li>

        <li class="page"> 1 / 4 </li>

        <li class="right">▶</li>

    </ul>

</body>

</html>

css

* {

    margin: 0; padding: 0;

    box-sizing: border-box;

    list-style: none;

}

.sec1 {

    width: 80%; height: 400px;

    border: 0px solid #ccc;

    margin: 0 auto;    

}

.sec1 .box, .sec1 .box_text {

    width: 100%; height: 100%;

    border: 0px solid #ccc;

    display: flex;    

    justify-content: space-between;

}

.sec1 .box_text {

    height: 60px;

    border: 0px solid blue;

    margin-top: 10px;

}

.sec1 .box li,

.sec1 .box_text li {

    width: 18%; height: 100%;

    border: 0px solid green;

    line-height: 20px;

}

.sec1 .box li {

    border: 1px solid #ccc;

}

.wrap {

    width: 300px; height: 350px;

    border: 1px solid black;

    margin: 100px auto;

    position: relative;

    overflow: hidden;

}

.sec2 {

    position: absolute;

    top: 0; left: 0;

    width: 1200px; height: 100%;

    border: 0px solid red;

    display: flex;

}

.sec2 div {

    width: 300px; height: 100%;

    border: 0px solid blue;

}

.btn {

    width: 300px; height: 50px;

    margin: -100px auto;

    display: flex;

}

.btn li {

    flex: 20%;

    line-height: 50px;  text-align: center;

    cursor: pointer;

}

js

//배열

const imgA = [

    "img0.jpg",

    "img1.jpg",

    "img2.jpg",

    "img3.jpg",

    "img4.jpg"

]

const picA = [

    "big0.jpg",

    "big1.jpg",

    "big2.jpg",

    "big3.jpg",

    "big4.jpg"

]

let i;

window.onload = function () {

    //그림 순서에 따라 불러오기

    for (i = 0; i < imgA.length; i++) {

        $(".box li:eq(" + i + ")").css("background", "url(img/" + imgA[i] + ")")

            .css("backgroundSize", "100% 100%")

    }

    for (i = 0; i < picA.length; i++) {

        $(".sec2 div:eq(" + i + ")").css("background", "url(img/" + picA[i] + ")")

            .css("backgroundSize", "100% 100%");

    }

    let count = 1, pos;

    //증가

    $(".right").on("click", function () {

        if (count < 4) {

            count++;

            //사진의 크기가 다를 수 있음으로 300px을 곱하여

            //일정하게 넘어가도록 한다

            pos = count * 300;

            $(".page").text(count + " / 4");

           

            //사진의 크기가 다를 수 있음으로 300px을 곱하여

            //일정하게 넘어가도록 한다

            pos = (count - 1) * 300;

           

            //옆으로 슬라이드 애니메이션

            $(".sec2").animate({ "left": pos + "px" }, 500);

        }

    })

    //감소

    $(".left").on("click", function () {

        if (count > 1) {

            count--;

            $(".page").text(count + " / 4");

           

            //사진의 크기가 다를 수 있음으로 300px을 곱하여

            //일정하게 넘어가도록 한다

            pos = (count - 1) * 300;

           

            //옆으로 슬라이드 애니메이션

            $(".sec2").animate({ "left": pos + "px" }, 500);

        }

    })

}

슬라이딩 애니메이션은 현재의 위치에서 왼쪽으로 -pos 픽셀 만큼 이동하도록 정의되어 있습니다. pos는 300의 배수로 변경됩니다. 따라서, 오른쪽 버튼을 클릭할 때 pos는 300, 600, 900, ...으로 증가하고 왼쪽 버튼을 클릭할 때는 600, 300, 0, ...으로 감소합니다.

슬라이딩 애니메이션은 음수값이므로, 오른쪽으로 클릭할 때마다 애니메이션은 왼쪽으로 이동하게 됩니다. 반대로, 왼쪽으로 클릭할 때마다 애니메이션은 오른쪽으로 이동합니다. 이러한 이동 방향이 슬라이드의 동작을 반대로 나타내게 됩니다