Front-end 국비지원 #053일

JooSehyun·2023년 1월 1일
360img360도 이미지SCSS for문addClassclientXcurrentjquerymouse movingpageXremoveClassscsssetIntervalslideslider가로 스크롤링가로스크롤반복문자동차360자동차회전제이쿼리
0

JQuery

01. JQuery Slider 360 Image

결과

HTML

  <div id="slideList">
        <p class="img1"></p>
        <p class="img2"></p>
        <p class="img3"></p>
        <p class="img4"></p>
        <p class="img5"></p>
        <p class="img6"></p>
        <p class="img7"></p>
        <p class="img8"></p>
        <p class="img9"></p>
        <p class="img10"></p>
        <p class="img11"></p>
        <p class="img12"></p>
        <p class="img13"></p>
        <p class="img14"></p>
        <p class="img15"></p>
        <p class="img16"></p>
        <p class="img17"></p>
        <p class="img18"></p>
        <p class="img19"></p>
        <p class="img20"></p>
        <p class="img21"></p>
        <p class="img22"></p>
        <p class="img23"></p>
        <p class="img24"></p>
        <p class="img25"></p>
        <p class="img26"></p>
        <p class="img27"></p>
        <p class="img28"></p>
        <p class="img29"></p>
        <p class="img30"></p>
        <p class="img31"></p>
        <p class="img32"></p>
        <p class="img33"></p>
        <p class="img34"></p>
        <p class="img35"></p>
        <p class="img36"></p>
        <p class="img37"></p>
        <p class="img38"></p>
        <p class="img39"></p>
        <p class="img40"></p>
        <p class="img41"></p>
        <p class="img42"></p>
        <p class="img43"></p>
        <p class="img44"></p>
        <p class="img45"></p>
        <p class="img46"></p>
        <p class="img47"></p>
        <p class="img48"></p>
        <p class="img49"></p>
        <p class="img50"></p>
        <p class="img51"></p>
        <p class="img52"></p>
        <p class="img53"></p>
        <p class="img54"></p>
        <p class="img55"></p>
        <p class="img56"></p>
        <p class="img57"></p>
        <p class="img58"></p>
        <p class="img59"></p>
        <p class="img60"></p>
        <p class="img61"></p>
        <p class="img62"></p>
        <p class="img63"></p>
        <p class="img64"></p>
        <p class="img65"></p>
        <p class="img66"></p>
        <p class="img67"></p>
        <p class="img68"></p>
        <p class="img69"></p>
        <p class="img70"></p>
        <p class="img71"></p>
        <p class="img72"></p>
        <p class="img73"></p>
        <p class="img74"></p>
        <p class="img75"></p>
        <p class="img76"></p>
        <p class="img77"></p>
        <p class="img78"></p>
        <p class="img79"></p>
        <p class="img80"></p>
        <p class="img81"></p>
        <p class="img82"></p>
        <p class="img83"></p>
        <p class="img84"></p>
        <p class="img85"></p>
        <p class="img86"></p>
        <p class="img87"></p>
        <p class="img88"></p>
        <p class="img89"></p>
        <p class="img90"></p>
        <p class="img91"></p>
        <p class="img92"></p>
        <p class="img93"></p>
        <p class="img94"></p>
        <p class="img95"></p>
        <p class="img96"></p>
        <p class="img97"></p>
        <p class="img98"></p>
        <p class="img99"></p>
        <p class="img100"></p>
        <p class="img101"></p>
        <p class="img102"></p>
        <p class="img103"></p>
        <p class="img104"></p>
        <p class="img105"></p>
        <p class="img106"></p>
        <p class="img107"></p>
        <p class="img108"></p>
        <p class="img109"></p>
        <p class="img110"></p>
        <p class="img111"></p>
        <p class="img112"></p>
        <p class="img113"></p>
        <p class="img114"></p>
        <p class="img115"></p>
        <p class="img116"></p>
        <p class="img117"></p>
        <p class="img118"></p>
        <p class="img119"></p>
    </div>
    <div id="slider"></div>

P 태그에 클래스이름을 정한다.

SCSS
반복문을 위해 SCSS 에서 작성한다.

#slideList{
    width: 500px;
    margin-left: 200px;
    p{
        display: none;
        margin-left: 100px;
        &:first-child{display: block;}
    }
}
#slider{width: 500px; margin-left: 326px;}
@for $i from 0 to 10{
    #slideList{
    p.img#{$i}{ background-image:url(../slideImg/Picanto_Green_0000#{$i}.jpg);width: 600px; height: 400px;} 
}
}
@for $j from 10 to 100{
    #slideList{
    p.img#{$j}{ background-image:url(../slideImg/Picanto_Green_000#{$j}.jpg);width: 600px; height: 400px;} 
}
}
@for $k from 100 to 120{
    #slideList{
    p.img#{$k}{ background-image:url(../slideImg/Picanto_Green_00#{$k}.jpg);width: 600px; height: 400px;} 
}
}

script

$(function(){
    let imageList=$('#slideList>p');
    $( "#slider" ).slider({
        slide:function(event, ui){
         let max=$('#slider').slider('option','max'); 
         let min=$('#slider').slider('option','min'); 
         let end=imageList.size()-1;
		 let imgIndex=parseInt((ui.value * end )/max);
         imageList.css('display','none');
         imageList.eq(imgIndex).css('display','block');
        }
    });
});

변수 #slideList>p를 만들고 #slider를 JQuery Ui인 slider를 만들어준다. max와 min값을 만들고 

imageList.css('display','none');
imageList.eq(imgIndex).css('display','block');

를 사용하여 다음 이미지가 나오고 숨겨지게 만들어준다.

02. JQuery Mouse on Moving

결과

HTML

<div id="gallery">
        <div class="title">Slide Moving</div>
        <div class="gallery-wrap">
                <ul class="val"><!-- ul>(li>fiqure.img-bg-$)*12 -->
                    <li><figure class="img-bg-1"></figure></li>
                    <li><figure class="img-bg-2"></figure></li>
                    <li><figure class="img-bg-3"></figure></li>
                    <li><figure class="img-bg-4"></figure></li>
                    <li><figure class="img-bg-5"></figure></li>
                    <li><figure class="img-bg-6"></figure></li>
                    <li><figure class="img-bg-7"></figure></li>
                    <li><figure class="img-bg-8"></figure></li>
                    <li><figure class="img-bg-9"></figure></li>
                    <li><figure class="img-bg-10"></figure></li>
                    <li><figure class="img-bg-11"></figure></li>
                    <li><figure class="img-bg-12"></figure></li>
                    <!-- 1,2번 추가함 -->
                    <li><figure class="img-bg-1"></figure></li>
                    <li><figure class="img-bg-12"></figure></li> 
                </ul>
        </div>
    </div>

CSS

*{margin: 0; padding: 0;}
#gallery{width: 100%; /* max-width: 1920px; */ overflow: hidden; /* background: red; */}
#gallery .title{padding: 100px 0; text-align: center; font-size: 30px;}
#gallery .gallery-wrap{width: 100%; height: 290px; position: relative;/*  overflow-x: scroll; */ display: flex; flex-wrap: wrap;}
#gallery .gallery-wrap > ul{position: absolute; top: 0; left: 0; width: 3480px; /* width: 250%; */ height: 100%;  list-style: none;}
#gallery .gallery-wrap ul li{width: 290px; height: 100%; float: left;} 
#gallery .gallery-wrap ul li figure{width: 100%; height: 100%;}
#gallery .gallery-wrap ul li .img-bg-1{background: url(../img/img_1.png) no-repeat 50% 50%/cover;}
#gallery .gallery-wrap ul li .img-bg-2{background: url(../img/img_2.png) no-repeat 50% 50%/cover;}
#gallery .gallery-wrap ul li .img-bg-3{background: url(../img/img_3.png) no-repeat 50% 50%/cover;}
#gallery .gallery-wrap ul li .img-bg-4{background: url(../img/img_4.png) no-repeat 50% 50%/cover;}
#gallery .gallery-wrap ul li .img-bg-5{background: url(../img/img_5.png) no-repeat 50% 50%/cover;}
#gallery .gallery-wrap ul li .img-bg-6{background: url(../img/img_6.png) no-repeat 50% 50%/cover;}
#gallery .gallery-wrap ul li .img-bg-7{background: url(../img/img_7.png) no-repeat 50% 50%/cover;}
#gallery .gallery-wrap ul li .img-bg-8{background: url(../img/img_8.png) no-repeat 50% 50%/cover;}
#gallery .gallery-wrap ul li .img-bg-9{background: url(../img/img_9.png) no-repeat 50% 50%/cover;}
#gallery .gallery-wrap ul li .img-bg-10{background: url(../img/img_10.png) no-repeat 50% 50%/cover;}
#gallery .gallery-wrap ul li .img-bg-11{background: url(../img/img_11.png) no-repeat 50% 50%/cover;}
#gallery .gallery-wrap ul li .img-bg-12{background: url(../img/img_12.png) no-repeat 50% 50%/cover;}

script

const galleryWrap=$('.gallery-wrap>ul');
let ov=$('.gallery-wrap');
galleryWrap.on({mousemove(e){
    $(this).css({left: -e.clientX})
    console.log(e.pageX);
}})

마우스를 움직이면 e의 반대방향의 값으로 스크롤을 움직이게 한다.

galleryWrap.on({mousemove(e){
$(this).css({left: -e.clientX})

03. JQuery Slide Moving

결과

HTML

<div id="box">
        <div class="issue">
            <div class="container">
                <div class="imgBox">
                    <div class="page">
                        <div class="view on"><img src="./img/issue-1.jpg" alt="1"></div>
                        <div class="view"><img src="./img/issue-2.jpg" alt="2"></div>
                        <div class="view"><img src="./img/issue-3.jpg" alt="3"></div>
                    </div>
                    <div class="btn">
                        <a href="#" class="prev">prev</a>
                        <a href="#" class="next">next</a>
                    </div>
                    <div class="pager">
                        <a href="#" class="on"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

*{margin: 0; padding: 0;}
#box{width: 100%; background: #deecec;}
.issue{background: #fffafa; width: 100%; height: 650px;}
.container{width: 90%; height: 600px; margin: 25px 5%; position: relative; /* background: red; */}
.imgBox .right{right: 0;}
.imgBox .left{left: 0;}
.page{position: absolute; width: 680px; height: 450px; /* background: #333; */ top: 0; left: 50%; margin-left: -340px;}
.page .view{position: absolute; height: 450px; width: 0%; overflow: hidden;}
.page .view.on{width: 100%;}
/* .page .view.on img{border-left: 2px solid #000;} */
.btn a{
    position: absolute;
    text-transform: uppercase;
    color: #333;
    font-weight: bold;
}
.btn .prev{
    top: 40%;
    left: 100px;
    transform: rotate(90deg);
}
.btn .next{
    top: 40%;
    right: 100px;
    transform: rotate(-90deg);
}
.pager{position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);}
.pager a{display: block; float: left; width: 15px; height: 15px; background: #d0d0d0; margin: 0 5px; border-radius: 50%;}
.pager a.on{background: #333; border: 4px solid #dadada; box-sizing: border-box;}

script

$(function(){
    const page=$('.imgBox .page .view');
    const prev=$('.imgBox .btn .prev');
    const next=$('.imgBox .btn .next');
    const pager=$('.imgBox .pager a');
    let current=0;
    let timer;

    event();
    function event(){
        timer=setInterval(function(){
            if(current==page.size()) current=0;
            let next=current+1;
            if(current==2) next=0;
            page.eq(current).css({zIndex:0}).removeClass('right');
            page.eq(current).stop().animate({width:'0%'},500);
            page.eq(next).css({zIndex:1}).addClass('right');
            page.eq(next).stop().animate({width:'100%'},500);
            current++;
            pager.removeClass('on');
            pager.eq(next).addClass('on');
        },3000);
    }
    $('.imgBox .page .view, .imgBox .btn .prev, .imgBox .btn .next, .imgBox .pager a').hover(function(){
        clearInterval(timer);
    },function(){
        event();
    });
    next.click(function(){
        if(current==page.size()) current=0;
            let next=current+1;
            if(current==2) next=0;
            page.eq(current).css({zIndex:0}).removeClass('right');
            page.eq(current).stop().animate({width:'0%'},500);
            page.eq(next).css({zIndex:1}).addClass('right');
            page.eq(next).stop().animate({width:'100%'},500);
            current++;
            pager.removeClass('on');
            pager.eq(next).addClass('on');
            return false;
    });
    prev.click(function(){
        if(current<0) current=2;
            let next=current-1;
            if(current==0) next=2;
            page.eq(current).css({zIndex:0}).removeClass('left');
            page.eq(current).stop().animate({width:'-100%'},500);
            page.eq(next).css({zIndex:1}).addClass('left');
            page.eq(next).stop().animate({width:'100%'},500);
            current--;
            pager.removeClass('on');
            pager.eq(next).addClass('on');
            return false;
    });
    pager.click(function(){
        let tg=$(this).index();
        page.eq(current).css({zIndex:0, width: '100%'}).removeClass('right');
        page.eq(current).stop().animate({width:'0%'},500);
        page.eq(tg).css({zIndex:1, width:0}).addClass('right');
        page.eq(tg).stop().animate({width:'100%'},500);
        current=tg;
        pager.removeClass('on')
        pager.eq(tg).addClass('on');
        return false;
    })
});

기존 슬라이드 방식과 같다. 다만 next와 prev가 되면서 z-index의 값이 추가되었다.

profile
JooSehyun
이전 포스트

Front-end 국비지원 #052일

다음 포스트

Front-end 국비지원 #054일

0개의 댓글