Я пишу плагин цикла jQuery.
Во-первых, анимация никогда не происходит. Каждый «слайд» находится там по умолчанию в течение восьми секунд и никогда не «всплывает» на следующее изображение без перехода. Ниже мой код. Я запустил его через JSLint, и единственное, что появилось, это то, что options никогда не используется в строке 103. Я предполагаю, что блок кода имеет какое-то отношение к тому, почему мой плагин не работает должным образом. Живой пример можно увидеть на http://corolla.tylercrompton.com/.
Во-вторых, это следующий вопрос к Создание слайдера без рекурсии , в котором мой скрипт не является плагином. Это сработало, хотя я все еще ищу ответ на этот вопрос. Спасибо.
jQuery(document).ready(function () {
'use strict';
(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var settings = {
'delay': 5000,
'direction': 'left',
'easing': 'swing',
'selector': '*',
'transition': 3000
};
if (options) {
$.extend(settings, options);
}
$(this).css({
'overflow': 'hidden',
'position': 'relative'
});
if ($(this).children(settings.selector).length > 1) {
$(this).cycle('slide', settings);
}
});
},
slide: function (options) {
return this.each(function () {
var settings = {
'delay': 5000,
'direction': 'left',
'easing': 'swing',
'selector': '*',
'transition': 3000
}, animation, property, value;
if (options) {
$.extend(settings, options);
}
switch (settings.direction) {
case 'left':
animation = {left: '-=' + $(this).width()};
property = 'left';
value = $(this).width();
break;
case 'right':
animation = {left: '+=' + $(this).width()};
property = 'right';
value = 0;
break;
case 'up':
animation = {top: '-=' + $(this).height()};
property = 'top';
value = $(this).height();
break;
case 'down':
animation = {top: '+=' + $(this).height()};
property = 'top';
value = 0;
break;
default:
jQuery.error('Direction ' + settings.direction + ' is not valid for jQuery.fn.cycle');
break;
}
$(this).children(settings.selector + ':first-child').each(function () {
$(this).delay(settings.delay);
$(this).animate(
animation,
settings.transition,
settings.easing,
function () {
$(this).css(property, value);
}
);
});
$(this).append($(this).children(settings.selector + ':first-child').detach());
$(this).children(settings.selector + ':first-child').each(function () {
$(this).delay(settings.delay);
$(this).animate(
animation,
settings.transition,
settings.easing,
function () {
$(this).parent().cycle('slide', settings);
}
);
});
});
}
};
jQuery.fn.cycle = function (method, options) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.fn.cycle');
}
};
}(jQuery));
jQuery('.slider').cycle();
});