Question

我第一次使用JQuery Cycle plugin，并尝试制作一个简单的图像幻灯片。在大多数情况下，我跟着this gentleman's tutorial。我最终得到了这段代码：

<head>
<style> @import "main.css"; </style>
  <script type="text/javascript" src="jquery-3.0.0.min.js"> </script>
  <script type="text/javascript" src="jquery.cycle.all.js"> </script>
  <script type="text/javascript">
    $('#slider').cycle({
    fx:     'scrollHorz',
    speed:  'slow',
    next:   '#next',
    prev:   '#prev'
    });
 </script>
</head>
<body>

<div id="picwrap">
<div id="piccont">

  <div id="prev" class="controller"> </div>
  <div id="slider">
    <img src="pic1.png" />
    <img src="pic2.png" />
    <img src="pic3.png" />
  </div>
  <div id="next" class="controller"> </div>

</div>
</div>

</body>

相关的CSS如下：

#picwrap {
  display: block;
  height: 560px;
  width: 580px;
  margin: auto;
}

#piccont {
  display: block;
  float: left;
  height: 560px;
  width: 580px;
  overflow: auto;
}

#prev {
  background-image: url(arrow-left.png);
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  height: 560px;
  width: 100px;
  float: left;
  position: relative;
  z-index: 99;
}

#next {
  background-image: url(arrow-right.png);
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  height: 560px;
  width: 100px;
  float: right;
  position: relative;
  z-index: 99;
}

#slider {
  display: block;
  height: 560px;
  width: 580px;
  float: left;
  position: absolute;
  overflow: hidden;
}

该脚本似乎无法正常工作。我只能假设我犯了一个我正在努力注意的轻微错误。我多次与视频交叉引用，并检查路径和文件名。我也看了在其他教程中，找不到我做错了什么。似乎插件的实现完全失败了，因为在添加脚本之前和之后文件似乎没有区别。我得到一张静态图像（pic1），上面有两个箭头（不可点击）。

非常感谢任何帮助。

Answer 1

看来你的CSS不正确。在第一行它说'picWrap'但如果我是正确的应该是'#picWrap'。大多数情况下，当Cycle没有产生错误但仍然不起作用时，它就在CSS中。

此外，将JS放在底部（关闭body标签之前）并将JS更改为：

$(document).ready(function(){
    $('#slider').cycle({
        fx:     'scrollHorz',
        speed:  'slow',
        next:   '#next',
        prev:   '#prev'
    });
});

循环需要加载图像才能计算出不同幻灯片的大小。有时我甚至选择使用$（window）.load而不是$（document）.ready。窗口加载在图像完全加载后执行。

为什么JQuery Cycle Plugin在这个应用程序中被破坏了？

1 个答案: