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

Question

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

在 div 内旋转绝对定位图像的函数的 Javascript。 我面临的问题是，如果我添加多个 div - 带有类 rotating-item-wrapper - 函数内的两个图像首先在第一个 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;
}

Answer 1

你可以通过这种方式创建一个基本的jquery插件:

(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 ));

并像这样调用它 $('#mydivid').InfiniteRotator(); 或使用您喜欢的选项