我创建了一个文本旋转器,它使用速度和间隔来确定旋转文本的速度和时间。一切似乎都运行正常,我唯一的问题是最后一次和第一次转换之间的闪烁。换句话说,我可以一起看到旧的和新的条目。有人可以帮我避免这个吗? 我的JSFIDDLE is here
我的JQuery代码是:
(function($) {
$(document).ready(function(){
//<![CDATA[
(function($) {
$.fn.rotator = function(settings) {
settings = jQuery.extend({
interval: 5000,
speed:800,
}, settings);
return this.each(function() {
var $t = $(this),
$item = $t.children().addClass('item').hide();
$t.addClass('rotator');
if ($item.length > 1) {
$item.first().addClass('current').fadeIn(settings.speed);
setInterval(function() {
var c = $t.find('.current');
if (c.next().length === 0) {
c.removeClass('current').fadeOut(settings.speed);
$item.first().addClass('current').fadeIn(settings.speed);
} else {
c.fadeOut(settings.speed, function () {
$(this).removeClass('current')
.next().addClass('current')
.fadeIn(settings.speed)
});
}
}, settings.interval);
}
});
};
})(jQuery);
// Execute here!
$(function() {
$('#slider').rotator();
});
//]]>
});
})(jQuery);