JQuery图像滑块和CSS转换只能工作一次

Question

我正在尝试学习jQuery插件。我正在创建一个图像滑动插件。到目前为止，我就是这样发展的。

(function($){
        $.imageSlider = function(selector, settings) {
        //settings
        var config = {      
            'delay':2000,
            'speed':500
        };
        if(settings) {
            $.extend(config, settings);
        }
        //vars
        var obj = $(selector);
        obj.children('img').css('transition','width 2s, height 2s, transform 2s');      
        var image = obj.children('img');
        var count = image.length;
        var i = 0;
        image.eq(0).show(); //first image showing
        //begin the image loop
        setInterval ( function() {
                image.eq(i).fadeOut(config.speed);
                i = (i+1 == count) ? 0 : i+1;
                image.eq(i).fadeIn(config.speed);
                image.eq(i).css("transform","rotate(360deg)");
            }, config.delay
        );
        return this;
    }
})(jQuery);

但我的问题是轮换只发生一次循环。

JSFiddlehttp://jsfiddle.net/va45D/1/

在所有3个图像按照我想要的方式加载后，它不应用转换。

请帮我了解一下这里发生了什么。

Answer 1

Hie Shan，

我可以重现你的问题，你是对的。第二次旋转图像后，它们将不再旋转。我正在使用Firefox 25。

为了解决你的问题，我做了这些更新：

setInterval( function() {
        image.eq(i).fadeOut(config.speed);    
        image.eq(i).css("transform","rotate(0deg)");
        i = (i+1 == count) ? 0 : i+1;
        image.eq(i).fadeIn(config.speed);
        image.eq(i).css("transform","rotate(360deg)");
    }, config.delay
);

当循环结束时，元素在循环结束时保持相同的值，因此当您第一次运行它时，您将所有img元素都放在0deg，在循环结束后，您将transform元素放在360deg位置。下次运行循环时（这解释了第二次出现的问题），所有图像都将在360deg上开始。如果将360deg旋转到360deg，则具有相同的位置，因为实际位置和新位置之间没有间隔。如果您将代码更新为45deg，这将非常明显，正如您在这个fiddle上看到的那样。

在开始这个过程之前，我定义了一个将元素返回到0度的转换。也许这个解决方案可以解决你的问题。

这是JSFiddle

谢谢！