Javascript jQuery动画未执行
我一直在写一个jQuery循环插件 首先,动画从未发生过。默认情况下,每张“幻灯片”都会在那里停留8秒钟,然后再也不会“弹出”到下一张图像,而不会进行任何转换。下面是我的代码。我通过JSLint运行了它,唯一的结果是,Javascript jQuery动画未执行,javascript,jquery,jquery-plugins,slider,Javascript,Jquery,Jquery Plugins,Slider,我一直在写一个jQuery循环插件 首先,动画从未发生过。默认情况下,每张“幻灯片”都会在那里停留8秒钟,然后再也不会“弹出”到下一张图像,而不会进行任何转换。下面是我的代码。我通过JSLint运行了它,唯一的结果是,options从未在第103行使用过。我猜这段代码与我的插件没有按预期工作有关。一个活生生的例子可以在网站上看到 其次,这是一个后续问题,我的脚本不是一个插件。不过,它确实起了作用,我仍在寻找答案。谢谢 jQuery(document).ready(function () {
options
从未在第103行使用过。我猜这段代码与我的插件没有按预期工作有关。一个活生生的例子可以在网站上看到
其次,这是一个后续问题,我的脚本不是一个插件。不过,它确实起了作用,我仍在寻找答案。谢谢
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();
});
这实际上是一个CSS错误,而不是JavaScript/JQuery错误。我从未将位置设置为绝对。我更新了我链接的问题中的JavaScript,以反映感兴趣的人的最新版本