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

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

JSFiddle http://jsfiddle.net/va45D/1/

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

请帮助我理解这里发生的事情。

Answer 1

希山，

我可以重现你的问题，你是对的。第二次旋转图像后，它们将不再旋转。我使用的是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，就可以看到这一点，如this fiddle所示。

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

Here is the JSFiddle

谢谢！

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

1 个答案: