函数搞笑调整大小

Question

我有这个横幅自动收报机，它在您第一次加载页面时起作用，但是当您第二次调整大小时它会搞砸，我的假设是我没有在调整大小事件上以正确的方式调用函数，任何建议所以我能理解发生了什么？

jsfiddle

HTML

<div class="">
    <div class="topBanners" style="float: left; width: 200px; ">
        <p>First one</p>
    </div>
    <div class="topBanners" style="float: left; width: 200px; ">
        <p>Second</p>
    </div>
    <div class="topBanners" style="float: left; width: 200px; ">
        <p>Third</p>
    </div>
</div>

JS

$(document).ready(function() {

    currentTopBanner = 0;
    var topBanners = $('.topBanners');

    console.log(topBanners.length);

    function rotateTopBanners() {

        if ($(window).width() < 768) {
            topBanners.hide();
            $(topBanners[currentTopBanner]).fadeIn('slow').delay(100).fadeOut('slow');
            $(topBanners[currentTopBanner]).queue(function () {
                currentTopBanner = currentTopBanner < topBanners.length - 1 ? currentTopBanner + 1 : 0;
                rotateTopBanners();
                $(this).dequeue();
            });
        } else {
            topBanners.show();
        }
    }

    rotateTopBanners();


    $(window).resize(function () {
        rotateTopBanners();
    });

});