5초마다 배너가 변경되는 jquery 예제코드

가로형 배너가 5초마다 다른 배너로 변경되는 반응형 배너 예제코드 입니다. 브라우저의 사이즈에 따라서 배너를 감싸고 있는 ul 의 높이값이 스크립트에 의해 변경이 됩니다.

<style>
    .banner {
        position:relative;
        top:0px;
        padding:0px;
    }
    .banner ul {
        overflow:hidden;
        border:2px solid #cfcfcf;
    }
    .banner ul li {
    }
    .banner ul li img{   
        width:100%;
    }
</style>



<div class="banner">
    <ul>
        <li><img src="image/banner.jpg"></li>
        <li><img src="image/banner2.jpg"></li>
    </ul>
</div>



<script>
    // banner
    $( window ).resize(function() {
        var imgHeight = $('.banner').find('li:first').css('height');
        $('.banner').find('ul:first').css('height', imgHeight);
        });
    $( window ).resize();

    function bannerChange(){
        if(!isHover){
            $('.banner').find('ul:first').find('li:eq(1)').css('display', 'block');
            $('.banner').find('ul:first').find('li:first').slideUp( "slow", function() {
                    var html = $(this).html();
                    $(this).remove();
                    $('.banner').find('ul:first').append('<li style="display:none;">'+html+'</li>');
                   
              });
          }
      }

    var myTimer = setInterval(bannerChange, 5000);
</script>