appendTo 슬라이드 만들기

자동으로 흘러가는 슬라이드이면서

스스로 뒤에가서 붙는 요소를 확인할 수 있다.

<div class="ft_banner">
        <ul>
            <li><img src="img/banner_01.jpg" alt="#"/></li>
            <li><img src="img/banner_02.png" alt="#"/></li>
            <li><img src="img/banner_03.jpg" alt="#"/></li>
            <li><img src="img/banner_04.png" alt="#"/></li>
            <li><img src="img/banner_05.jpg" alt="#"/></li>
            <li><img src="img/banner_06.png" alt="#"/></li>
            <li><img src="img/banner_07.jpg" alt="#"/></li>
        </ul>
    </div>

.ft_banner{width: 1200px; height:58px; overflow:hidden; margin:auto;}
.ft_banner ul{position: relative;}
.ft_banner li{width:200px; height:58px; float: left; border: 1px solid #eee;}
.ft_banner li img{width: 100%;}

$(function () {
    var len = $('.ft_banner li').length
    var wid = parseInt($('.ft_banner li').outerWidth())

    var total = len * wid

    $('.ft_banner ul').css({
        'width': total
    })
    var mleft = 0

    setInterval(move, 20)

    function move() {
        mleft -= 2
        $('.ft_banner ul').css({
            'left': mleft
        })

        if (mleft == -202) {
            $('.ft_banner ul li').eq(0).appendTo('.ft_banner ul')
        } else if (mleft < -400) {
            mleft = -200
        }
    }
})