20180808 / 디지텍 / 슬라이드 심화

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * { margin:0; padding:0; }
        ul, li { list-style:none; }
        .slide { width:1200px;margin:20px auto;height:400px; position:relative;overflow:hidden;}
        .slide ul{height:400px;position:relative;}
        .slide li{height:400px;}
        .slide li:nth-child(1){background:#faa;}
        .slide li:nth-child(2){background:#afa;}
        .slide li:nth-child(3){background:#aaf;}
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
    <div class="slide" data-type="right2left" data-delay="1000" data-time="300" data-arrow="false" data-bullet="false">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="slide" data-type="btm2top" data-delay="1500" data-time="500" data-arrow="true" data-bullet="false">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="slide" data-type="fade" data-delay="2000" data-time="1000" data-arrow="true" data-bullet="true">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script type="text/javascript">
        function slide () {
            $('.slide').each( function (idx, target) {
                var obj      = $(target).find('ul')
                var len      = $(target).find('li').length
                var playTime = $(target).data('time')
                var delay    = $(target).data('delay')
                var type     = $(target).data('type')
                var arrow    = $(target).data('arrow')
                var bullet   = $(target).data('bullet')
                var pos      = 0
                var timer
 
                obj.find('li').eq(pos).addClass('active')
                obj.css('position', 'relative')

                if (arrow) {
                    var arrowStyle = 'position:absolute; top:calc(50% - 25px); height:50px; display:block; line-height:50px;'
                    var arrowLeft  = 'left:0;'
                    var arrowRight = 'right:0;'
                    $('<a href="#" class="arrow left">왼쪽</a>').attr('style', arrowStyle + arrowLeft).appendTo(target)
                    $('<a href="#" class="arrow right">오른쪽</a>').attr('style', arrowStyle + arrowRight).appendTo(target)
                }

                if (bullet) {
                    var wrapStyle  = 'position:absolute; bottom:20px; left:0; right:0; text-align:center;'
                    var childStyle = 'width:20px; height:20px; background:#666; transition:0.5s; display:inline-block; margin:0 3px; border-radius:20px'
                    var bulletWrap = $('<div class="pos"></div>').attr('style', wrapStyle)
                    for (var i = 0; i < len; i++) {
                        var bulletChild = $('<a href="#"></a>').attr('style', childStyle)
                        if (i == 0) bulletChild.addClass('active').css('background', '#000')
                        bulletChild.appendTo(bulletWrap)
                    }
                    bulletWrap.appendTo(target)
                }
 
                if (type == 'right2left')
                    obj.css({display:'flex', width:len*100+"%"}).find('li').css({width:100/len+"%"})
                else if(type == 'fade')
                    obj.find('li').css({position:'absolute',left:0,top:0,width:'100%',height:'100%'}).not('.active').hide()
 
                function play () {
                    clearTimeout(timer)

                    if (++pos >= len)  pos = 0
                    else if (pos < 0) pos = len-1
                    $(target).find(".pos a.active").removeClass('active').css("background","#666")
                    $(target).find(".pos a").eq(pos).addClass('active').css("background","#000")
                    switch (type) {
                        case 'fade' :
                            obj.find('li.active').removeClass('active').stop().fadeOut(playTime)
                            obj.find('li').eq(pos).addClass('active').stop().fadeIn(playTime)
                        break;
                        case 'right2left' :
                            obj.stop().animate({
                                marginLeft:-pos*100+'%'
                            }, playTime)
                        break;
                        case 'btm2top' :
                            obj.stop().animate({
                                top:-pos*100+'%'
                            }, playTime)
                        break;
                    }
                    timer = setTimeout(play, delay)
                }

                $(target).find('.arrow').on('click', function () {
                    if ($(this).hasClass('left')) pos -= 2
                    play()
                    return false
                })

                $(target).find('.pos a').on('click', function () {
                    pos = $(this).index() - 1
                    play()
                    return false
                })
 
                timer = setTimeout(play, delay)
            } )
        }
        $(slide)
</script>
</body>
</html>