如何使我的无限图像旋转器能够应用于许多旋转框

标题名称并没有明确我想做什么，但我将在这里用一些代码进行解释。

一个函数的Javascript，它在div中旋转绝对定位的图像。我面临的问题是，如果我添加了多个div-类旋转项包装器-函数内有两个图像，首先在第一个div内旋转，然后在第二个div内。我想单独旋转它们。

var InfiniteRotator =
    {
        init: function()
        {
            //initial fade-in time (in milliseconds)
            var initialFadeIn = 1000;
            //interval between items (in milliseconds)
            var itemInterval = 5000;
            //cross-fade time (in milliseconds)
            var fadeTime = 2500;
            //count number of items
            var numberOfItems = $('.rotating-item').length;
            //set current item
            var currentItem = 0;
            //show first item
            $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
            //loop through the items
            var infiniteLoop = setInterval(function(){
                $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
                if(currentItem == numberOfItems -1){
                    currentItem = 0;
                }else{
                    currentItem++;
                }
                $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
            }, itemInterval);
        }
    };
    InfiniteRotator.init();

编辑到这个和这个功能从不旋转图像

<script>
        (function( $ ) {
        $.fn.InfiniteRotator = function(options) {
            var defaults = {
                //initial fade-in time (in milliseconds)
                initialFadeIn: 1000,
                //interval between items (in milliseconds)
                itemInterval: 5000,
                //cross-fade time (in milliseconds)
                fadeTime: 2500,
                currentItem: 0
            };
            var settings = $.extend( {}, defaults, options );
            return this.each(function() {
                var numberOfItems = $(this).find('.rotating-item').length; 
                $(this).find('.rotating-item').eq(settings.currentItem).fadeIn(settings.initialFadeIn);
                //loop through the items
                var infiniteLoop = setInterval(function(){
                    $(this).find('.rotating-item').eq(settings.currentItem).fadeOut(settings.fadeTime);
                    if(settings.currentItem == numberOfItems -1){
                        settings.currentItem = 0;
                    }else{
                        settings.currentItem++;
                    }
                    $(this).find('.rotating-item').eq(settings.currentItem).fadeIn(settings.fadeTime);
                }, settings.itemInterval);
            });
        };
    }( jQuery ));
        $(window).load(function() { //start after HTML, images have loaded
            $('#rotating-item-wrapper1').InfiniteRotator();
        });
    </script>

HTML:

<section>
                <div class="imagesPanel" id="P1">   
                    <div class="rotating-item-wrapper" id="rotating-item-wrapper1">
                        <img class="rotating-item" src="Images/HotelM/1.jpg" alt="">
                        <img class="rotating-item" src="Images/HotelM/5.jpg" alt="">    
                    </div>
                    <img src="Images/HotelM/2.jpg" alt="">
                    <img src="Images/HotelM/3.jpg" alt="">
                    <img src="Images/HotelM/4.jpg" alt="">
                </div>
                <div class="imagesPanel">
                    <img src="Images/rooms/1.jpg" alt="">
                    <img src="Images/rooms/3.jpg" alt="">
                    <img src="Images/rooms/5.jpg" alt="">
                    <img src="Images/rooms/6.jpg" alt="">
                </div>

CSS：

section .imagesPanel img{
    position: relative;
    width: 25%;
    height: auto;
    border: 0;
    float: left;
}
.rotating-item-wrapper {
    position: relative;
    width: 250px;
    height: 188px;
    border: 0;
    float: left;    
}
.rotating-item-wrapper .rotating-item {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}