Question

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

将div中的绝对定位图像旋转的函数的Javascript。我面临的问题是，如果我添加多个div -with class rotate-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

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

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

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();或您喜欢的选项

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

2 个答案: