Question

我无法使jquery cycle2插件生效。

幻灯片显示无法加载和图像。它们只是出现在彼此之下。我没有看到任何控制台错误。我有最新的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。

Answer 1

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

Documentation：

Cycle2允许您为幻灯片使用任何类型的元素，但事实并非如此仅用于骑车图像。但是，图像是默认的幻灯片类型所以要使用其他元素来覆盖幻灯片选项显示在此页面上。 slide选项可以设置为任何有效的jQuery 选择。默认值为＆gt; 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>

Jquery cycle2插件无法正常工作

1 个答案: