Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/85.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jQuery动画未执行_Javascript_Jquery_Jquery Plugins_Slider - Fatal编程技术网

Javascript jQuery动画未执行

Javascript jQuery动画未执行,javascript,jquery,jquery-plugins,slider,Javascript,Jquery,Jquery Plugins,Slider,我一直在写一个jQuery循环插件 首先,动画从未发生过。默认情况下,每张“幻灯片”都会在那里停留8秒钟,然后再也不会“弹出”到下一张图像,而不会进行任何转换。下面是我的代码。我通过JSLint运行了它,唯一的结果是,options从未在第103行使用过。我猜这段代码与我的插件没有按预期工作有关。一个活生生的例子可以在网站上看到 其次,这是一个后续问题,我的脚本不是一个插件。不过,它确实起了作用,我仍在寻找答案。谢谢 jQuery(document).ready(function () {

我一直在写一个jQuery循环插件

首先,动画从未发生过。默认情况下,每张“幻灯片”都会在那里停留8秒钟,然后再也不会“弹出”到下一张图像,而不会进行任何转换。下面是我的代码。我通过JSLint运行了它,唯一的结果是,
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,以反映感兴趣的人的最新版本