웹디자인 기능사 실기 벼락치기2. 사진 슬라이드

↓새로운 공개문제 (JUST 쇼핑몰) 사진슬라이드 js코드 보기↓

2019/05/07 - JUST 쇼핑몰 문제풀이 6. JS, 제이쿼리 - 메뉴, 슬라이더 효과 (웹디자인 기능사 실기 공개문제)

 

 

$(function(){

    var now = 1;
    var max = 3;
    var w = 960;
    var slide;


    //slideitem3을 맨 앞으로 위치 이동 처음 시작

    $('#slide .container').prepend($('#slide .container .slideitem3'));
    slide = setInterval(function(){
        $('#slide .container > div:nth-child(1)').animate({
            'margin-left':(w*(-1))+'px'
        },600,function(){
            $('#slide .container').append($('#slide .container > div:nth-child(1)'));
            $('#slide .container > div:nth-child(3)').css('margin-left','0px');
        });
    },2500);
});

사진슬라이더 삽입을 위해 html 코드를 먼저 짠다.

사진 세장이 돌아가는데, 1번 사진이 먼저 보이고 시간 간격을 두고 2번~3번~다시 1번사진으로 계속 돈다.

 

HTML 코드

<div id="main_image">

    <div id="slide">

        <div class="container">

            <div class="slide_photo1"></div>

            <div class="slide_photo2"></div>

            <div class="slide_photo3"></div>

        </div>

    </div>

    <span>"환영합니다! 한국대학교 동문여러분”</span>

</div>

 

 

CSS 코드

 

#main_image{height:350px;overflow: hidden;position: relative; top:50%; left:50%; margin-left:-141.5px; margin-top:-23.5px;}

#slide{height:350px;}

#slide .container{position: relative; height:350px; width:2850px; left:-960px;}

#slide .container > div{width:960px; height:350px; float:left;}

.container .slide_photo1{background:url('../img/images1.jpg') no-repeat center / cover;}

.container .slide_photo2{background:url('../img/images2.jpg') no-repeat center / cover;}

.container .slide_photo3{background:url('../img/images3.jpg') no-repeat center / cover;}

 

 

JS 코드