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

我正在尝试学习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);

但我的问题是，轮换周期只发生一次

JSFIDLE

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

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

Hie Shan

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

为了解决您的问题，我进行了以下更新：

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元素都处于0度，在结束时，您将它们转换为360度位置。下次运行循环时，请解释第二次出现的问题，所有图像都从360度开始。如果将360度旋转到360度，则具有相同的位置，因为实际位置和新位置之间没有间隔。如果您将代码更新为45度，这将非常明显，如您在上所示

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

谢谢

Hie Shan

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

为了解决您的问题，我进行了以下更新：

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元素都处于0度，在结束时，您将它们转换为360度位置。下次运行循环时，请解释第二次出现的问题，所有图像都从360度开始。如果将360度旋转到360度，则具有相同的位置，因为实际位置和新位置之间没有间隔。如果您将代码更新为45度，这将非常明显，如您在上所示

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

---

谢谢

在这里工作。看不出问题第二次后它就不转了它也在这里工作。唯一的补充我建议你是添加一个位置绝对的图像，以减少闪烁。。。幻灯片img{display:none；position:absolute；top:0px；left:0px}我想做的是旋转并逐个显示所有图像。第一次我想这样做。但在那之后，它只是滑动图像而不旋转。我是唯一一个看到这个的人。奇怪的可能是浏览器或操作系统的问题。这似乎对每个人都有效。您发送的小提琴会在三个横幅之间不断旋转，不会停止，也不会偏离。试试另一台电脑？那就让我们知道，如果你在这里工作对你不起作用。看不出问题第二次后它就不转了它也在这里工作。唯一的补充我建议你是添加一个位置绝对的图像，以减少闪烁。。。幻灯片img{display:none；position:absolute；top:0px；left:0px}我想做的是旋转并逐个显示所有图像。第一次我想这样做。但在那之后，它只是滑动图像而不旋转。我是唯一一个看到这个的人。奇怪的可能是浏览器或操作系统的问题。这似乎对每个人都有效。您发送的小提琴会在三个横幅之间不断旋转，不会停止，也不会偏离。试试另一台电脑？那就让我们知道，如果这对你不起作用的话，那就谢谢你@EliezerBernart！你帮了大忙。我很高兴有人看到了我所看到的。但它仍然不能与chrome一起使用。不客气@shan！正如您在上看到的，transform2d需要供应商前缀才能在Chrome和其他浏览器上工作，如果您想解决跨浏览器兼容性问题，请尝试一下。谢谢@EliezerBernart！你帮了大忙。我很高兴有人看到了我所看到的。但它仍然不能与chrome一起使用。不客气@shan！正如您在上看到的，transform2d需要供应商前缀才能在Chrome和其他浏览器上工作，如果您想解决跨浏览器兼容性问题，请尝试一下，也许会对您有所帮助。