브라우저 제목

html

             <div class="slider">
                    <ul class="panel">
                        <li>1번슬라이드</li>
                        <li>2번슬라이드</li>
                        <li>3번슬라이드</li>
                    </ul>
                   
                </div>

 

css

.slider{
    width:100%;
    height:300px;
    border:1px solid red;

    overflow:hidden;
    position:relative;
}

.panel{
    width:300%;
    height:100%;
    position:relative;
    left:0;
    list-style:none;
    margin:0;
    padding:0;
}
.panel:after{
    content:"";
    display:block;
    clear:both;
}
.panel>li{
    width:33.3%;
    height:100%;
    float:left;
    position:relative;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    
}
.panel>li:first-child{
    background-image:url(../images/back1.jpg);
    
}
.panel>li:nth-child(2){
    background-image:url(../images/back2.jpg);
}
.panel>li:nth-child(3){
    background-image:url(../images/back3.jpg);
}

 

js

 

var now_num;

function nextPlay(){
            if(now_num==slide_length-1){
                now_num=0;
            }else{
                now_num++; 
            }
           $(".panel").stop().animate({
                left:-1200*now_num
            });
        }

 

function autoPlay(){
            auto=setInterval(function(){
                nextPlay();
            },3000)
        }
        autoPlay();

제목 날짜
포트폴리오 샘플 2020.05.21
데스크탑, 모바일 구분 접속 2019.02.11
터치이벤트, pc환경과 모바일 환경 알아내기 file 2020.05.04
코르도바 를 설정하기 위한 방법 file 2020.04.26
sticky position file 2020.04.22
webfont file 2020.04.21
video file 2020.04.15
audio2 file 2020.04.15
audio 2020.04.11
wheel이벤트3 file 2020.04.11
wheel이벤트2 file 2020.04.11
wheel이벤트1 file 2020.04.11
드레그 앤 드롭 효과 예제 file 2020.04.03
드레그 앤 드롭 효과 원리 file 2020.04.03
슬라이드 페이지 네이션 file 2020.04.02
좌/우 슬라이드 슬라이드 개수처리, 너비 처리 file 2020.04.02
모바일 작업 file 2020.04.02
자격증 슬라이드 기본 2020.03.30
스크롤바 없에는 css 2020.03.30
터지이벤트와 mouseup, mousedown이벤트 2020.03.28
태그 목록