Jquery cycle2 插件不工作答案

【问题标题】：Jquery cycle2 plugin not workingJquery cycle2 插件不工作
【发布时间】：2016-06-21 01:59:48
【问题描述】：

我无法让 jquery cycle2 插件工作。

幻灯片无法加载和图像。它们只是在彼此下方出现 1。我没有看到任何控制台错误。我有最新的 jquery(3.0)。

这是我的代码。顺便说一句，我对 javascript 和 jquery 比较陌生：

$('document').ready(function($) {
  $('#slideshow').cycle({
    timeout: 0, // no autoplay
    fx: 'fade', //
    next: '#next',
    prev: '#prev'
  });
});

<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>" />
  <meta name="viewport" content="width=device-width" />

  <link rel="profile" href="http://gmpg.org/xfn/11" />
  <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

  <script type="text/javascript" src="<?php echo      get_template_directory_uri();?>/assets/scripts/jquery.min.js"></script>

  <!-- Cycle2 -->
  <script type="text/javascript" src="<?php echo     get_template_directory_uri();?>/assets/scripts/jquery.cycle2.min.js"></script>

</head>

<div id="slideshow">
  <div style="width:250px; height:150px; background:red;"></div>
  <div style="width:250px; height:150px; background:blue;"></div>
  <div style="width:250px; height:150px; background:green;"></div>
  <div style="width:250px; height:150px; background:yellow;">
  </div>
  <div id="prev" style="float:left;">PREV</div>
  <div id="next" style="float:right;">NEXT</div>

我不确定为什么这不起作用。因为这是以前有人给出的例子。顺便说一句，我正在使用 wordpress。它不适用于chrome或firefox。

【问题讨论】：

大多数主题已经包含 jQuery.js。您应该使用正确的enqueue_script 方法。最好的猜测是第二个版本会清除您加载的插件......但这也应该引发错误。至于图像堆叠...使用默认 css 来解决这个问题
嗨，如果我从头中删除 jquery.js，我会得到一个控制台错误“jquery”未定义，并且该错误来自循环插件，它正在声明 jquery。并且图像堆叠应该使用 css，它应该创建幻灯片的插件本身。
但这就是为什么你应该正确排队......页面中还有另一个 jQuery.js 吗？您不能在 jQuery.js 加载之前包含插件文件，如果它加载两次，它将清除注册到第一个版本的插件
您好，我对 javascript 和网站开发相对较新，所以我希望我能正确理解您。正在加载的标头中没有其他 jquery.js/jquery.min.js。我用这段代码在我的主题的functions.php中注册了脚本
function wpb_adding_styles() { wp_register_script('my_script_name', get_stylesheet_directory_uri() . '/assets/scripts/jquery.cycle2.min.js'); wp_enqueue_script('my_script_name'); } add_action('wp_enqueue_scripts', 'wpb_adding_styles');

标签： javascript jquery jquery-cycle2

【解决方案1】：

这是因为您没有指定需要循环浏览的子 HTML 元素。请将data-cycle-slides="> div" 添加到您的标记中。

Documentation:

Cycle2 允许您为幻灯片使用任何类型的元素，但不是仅用于自行车图像。但是，图像是默认幻灯片类型所以要使用其他元素，您需要覆盖幻灯片选项在此页面上显示。幻灯片选项可以设置为任何有效的 jQuery 选择器。默认值为 > img ，这是一个查找所有内容的选择器作为幻灯片容器的直接子级的图像元素。

小提琴：https://jsfiddle.net/codeandcloud/tf24noy6/

片段

<!DOCTYPE html>
<html>
<head>
    <title>Cycle2 Plugin - Malsup by codeandcloud</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
    <title>Cycle2 Plugin - Malsup by codeandcloud</title>
    <script type='text/javascript'>
        //<![CDATA[

        $('document').ready(function ($) {
            $('#slideshow').cycle({
                timeout: 0, // no autoplay
                fx: 'fade', //
                next: '#next',
                prev: '#prev'
            });
        });

        //]]>
    </script>
</head>
<body>
    <div style="width: 250px">
        <div id="slideshow" data-cycle-slides="> div">
            <div style="width:250px; height:150px; background:red;"></div>
            <div style="width:250px; height:150px; background:blue;"></div>
            <div style="width:250px; height:150px; background:green;"></div>
            <div style="width:250px; height:150px; background:yellow;"></div>
        </div>
        <div id="prev" style="float:left;">PREV</div>
        <div id="next" style="float:right;">NEXT</div>
    </div>
</body>
</html>

【讨论】：

感谢 Naveen，但这对我也不起作用。我得到的结果是，如果您拿起小提琴并将语言更改为“Javascript 1.7”然后运行。我正在使用最新版本的 chrome。
jquery 是一个 JavaScript 库。您需要包含 jQuery，因为 cycle2 是一个 jQuery 插件，它依赖于 jquery。
您好 Naveen，感谢您的帮助，但我不明白。我以为我包含了 jquery，正如您在标题中看到的那样。我在文件夹中有相应的文件。
从页面顶部删除 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>。以上header