Blog Content

    티스토리 뷰

    jQuery 폐쇄형 슬라이드


    jQuery 슬라이드




    웹사이트에서 제이쿼리를 이용한 슬라이드

    폐쇄형으로 작업되었다. 즉, 이전, 다음 이미지가 보이지 않는 오로지 중앙에 이미지가 나올때 적합한 소스이다.

    오픈된 슬라이드 메뉴가 아닌 폐쇄형 슬라이드다.


    실행된 이미지 



        
    0000
    1111
    2222
    3333
        
        .wrap {width:400px; margin:0 auto; }
        .wrap .sliderWrap {width:400px; height:200px;overflow:hidden;}
        .wrap .slider:after {display:block; content:""; clear:both;}
        .wrap .slider {height:100%; width:1600px; position:relative;}
        .wrap .box {float:left; width:400px; height:100%; position: absolute; left:400px; top:0; font-size:20px; text-align: center; line-height:200px; color:#fff;}
        .wrap .box:nth-child(1){background:burlywood; }
        .wrap .box:nth-child(2){background:rebeccapurple}
        .wrap .box:nth-child(3){background:blue}
        .wrap .box:nth-child(4){background:green}
        .wrap .indicator {font-size:0; text-align:center; margin-top:10px;}
        .wrap .indicator a:first-child {margin-left:0;}
        .wrap .indicator a {display:inline-block; width:14px; height:14px; border-radius:8px; background: fuchsia; margin-left:5px;}
        .wrap .indicator a.on {background:blueviolet}
    
    (function(){
    
        var curIdx = 0;
        var $item = $('.box')
        var len = $item.length
        var $indicator = $('.indicator')
    
        $item.eq(0).css({
            left : 0
        });
        function show(direc, hideIdx, showIdx){
            console.log('hideIdx : ' + hideIdx + '   showIdx : ' + showIdx);
            //next
            $item.eq(hideIdx).animate({
                left : (direc * -400) +"px"
            });
            
            $item.eq(showIdx).css({
                left : (direc * 400) + "px"
            });
            $item.eq(showIdx).animate({
                left : 0
            });
            $indicator.find('a').eq(showIdx).addClass('on').siblings().removeClass('on');
            curIdx = showIdx;
        }
        setInterval(function() {
            var showIdx = curIdx + 1
            if(len <= showIdx){
                showIdx = 0
            }
            show(1, curIdx, showIdx);
        }, 2000)
    
        $('.next').on('click', function(){
            var showIdx = curIdx + 1
            if(len <= showIdx){
                showIdx = 0
            }
            //next()
            show(1, curIdx, showIdx);
        })
        $('.prev').on('click', function(){
            var showIdx = curIdx - 1;
            if(showIdx < 0 ){
                showIdx = len - 1
            }
            //prev()
            show(-1, curIdx, showIdx)
        });
    
        $('.indicator a').on('click', function(){
            var idx = $(this).index();
            
            // curIdx++
            // console.log(curIdx)
            show(idx > curIdx ? 1 : -1, curIdx, idx);
    
        });
    
    
    })();
    
    sub's
    Blog



    '개발연습막쓰기 > jQuery' 카테고리의 다른 글

    setInterval 타이머  (0) 2018.12.09
    애트리뷰트 팝업 창 띄우기  (0) 2018.11.01
    jQuery 실행 파일의 위치  (0) 2018.09.03
    jQuery 의 사상  (0) 2018.09.03
    이미지 체인지 관련  (0) 2018.05.16

    Comments