我第一次使用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），其顶部有两个箭头（不可单击）。
任何帮助将不胜感激。
最佳答案
看来您的CSS不正确。在第一行中，它显示为“ picWrap”，但如果我正确的话，它应该为“ #picWrap”。在大多数情况下，Cycle不会产生错误，但仍然不起作用，它在CSS中。
另外，将您的JS放在底部（在关闭body标签之前），然后将JS更改为此：
$(document).ready(function(){
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'slow',
next: '#next',
prev: '#prev'
});
});
Cycle需要先加载图像，然后才能计算不同幻灯片的大小。有时我什至选择使用$（window）.load而不是$（document）.ready。图像完全加载后，将执行窗口加载。
关于javascript - 为什么在此应用程序中损坏了JQuery Cycle插件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38190583/