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