如何使我的 Infinite images 旋转器能够应用于许多旋转框

Question

Title 名称没有说明我想做什么，但我会在这里用一些代码来解释它。

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

您可以将元素传递给您的 init 函数，我相信您正在尝试这样做。基本上，主要元素是包含旋转项目的包装器。然后，您可以使用该元素进一步向下遍历以制作动画。

我还注意到您示例中的选择器称为 .DivID 但它是 class 因为它使用 . 作为选择器...也许它应该是一个 #id 代替？在下面的示例中，我将其更改为 class 选择器。

var InfiniteRotator = {
    init: function(element, options) {
        console.log(element.length);
        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);

        var numberOfItems = $(element).find('.rotating-item');

        $(this).find('.rotating-item').eq(settings.currentItem).fadeIn(settings.initialFadeIn);

        //loop through the items
        var infiniteLoop = setInterval(function() {
            $(this).find('.rotating-item').stop().eq(settings.currentItem).fadeOut(settings.fadeTime);

            if (settings.currentItem == numberOfItems - 1) {
                settings.currentItem = 0;
            } else {
                settings.currentItem++;
            }
            $(this).find('.rotating-item').stop().eq(settings.currentItem).fadeIn(settings.fadeTime);

        }, settings.itemInterval);

    }
};

InfiniteRotator.init($(".divClass"), null);

Answer 2

您可以通过这种方式创建一个基本的 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(); 或使用您喜欢的选项

如何使我的 Infinite images 旋转器能够应用于许多旋转框

How to make my Infinite images rotater able to be applied to many rotating boxes

html

javascript

css

jquery

rotation