브라우저 제목

html

 

<div class="slider">
                    <ul class="panel">
                        <li>1번슬라이드</li>
                        <li>2번슬라이드</li>
                        <li>3번슬라이드</li>
                    </ul>
                    <span class="prev">이전</span>
                    <span class="next">다음</span>
                </div>

 

 

css

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

.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; 
}
.panel>li img{

    width:100%;

}
.prev,
.next{
    display:block;
    position:absolute;
    width:50px;
    height:50px;
    background:#fff;
    top:50%;
    padding:10px 0;
    cursor:pointer;
}
.prev{
    left:20px;
}
.next{
    right:20px;
}

 

js

 

var wid=0;  //slider의 크기 초기값
    var now_num=0; //slider의 개수 카운트 초기값
    var slide_length=0; //slider의 개수 초기값
    var auto=null;  //자동실행 초기값;
    var $panel=$(".panel"); //.panel요소 저장
    var $panel_li=$panel.children("li"); //.panel li요소 저장
    
    //변수 초기화
    function init(){
        wid=$(".slider").width(); //슬라이더구역의 너비 저장
        slide_length=$panel_li.length; //슬라이더의 개수 저장
    }
    
    //이벤트 처리
    function slideEvent(){
        
        //다음 처리시 조건 검사 
        function nextPlay(){
            if(now_num==slide_length-1){
                now_num=0;
            }else{
                now_num++; 
            }
            slideMove();
        }
        //이전 처리시 조건 검사
        function prevPlay(){
            if(now_num==0){
                now_num=slide_length-1;
            }else{
                now_num--;
            }
            slideMove();
        }
        //슬라이드 무브
        function slideMove(){
            $panel.stop().animate({
                left:-wid*now_num
            });
        }
        
        //자동 실행
        function autoPlay(){
            auto=setInterval(function(){
                nextPlay();
            },3000)
        }
        autoPlay();
        
        
        $panel_li.hover(
            function(){
                //자동실행 멈춤
                clearInterval(auto);
            },
            function(){
                //재실행
                autoPlay();
            }
        );
        //다음 클릭시 처리
        $(".next").click(function(){
            nextPlay();
        });
        
        //이전 클릭시 처리]
        $(".prev").click(function(){
            prevPlay();
        });
        
        
        
    }
    init();
   slideEvent();

 

 

 

제목 날짜
3월 28일 평가 있습니다. 2019.03.26
최종디자인 정리 2021.01.10
구현응용 팀 협업 2021.01.08
디자인 제작 정리 2020.12.05
사진이미지편집 정리 2020.11.16
배색 정리 2020.10.02
재평가 정리 2020.09.25
무료 이미지 사이트 2020.09.14
디자인과 색채 학습 정리2 2020.09.12
디자인과 색채 학습 정리1 2020.09.08
디자인과 색채 file 2020.09.02
사용자 경험 디자인 file 2020.02.22
만들어갈 프로토타입 file 2020.01.03
프로그램 설치 동영상 2019.12.31
Creative Cloud Desktop 프로그램(어도비 설치 프로그램) file 2019.12.30
한번 해보기 file 2019.12.29
background-position 스크롤 이동, progress bar 애니메이션 file 2019.10.14
좌우 슬라이더 및 레이어 팝업 file 2019.10.14
좌우 슬라이더 file 2019.10.09
학습파일 file 2019.10.08
전체 문서에서 wheel을 이용하여 특정 값만큼 움직이기 file 2019.10.06
태그 목록