我正在尝试在网站上使用 jQuery Cycle2 插件，但我对 jQuery 非常陌生，因此很难进行故障排除。我在 JavaScript 控制台中没有看到任何错误。我的代码如下 I also made a jsfiddle here which passed validation 。它在本地工作，但是当我将其插入 OpenCMS 时，轮播中的幻灯片超出了其容器，并且大小为 100%，并且没有任何内容可单击(这意味着即使单击超大轮播图像也不会更改第一个 div 中的幻灯片，即坐在一切后面)。
我插入的网站正在运行 jQuery 1.3.2，我无法更改或更新它，所以我使用了 noConflict。在我使用 noConflict 之前，网站的其他部分已损坏并且 slider 无法工作。现在网站的其他部分都正常，但 slider 仍然无法运行。
slider 使用 div 上的数据属性来传递选项，我想它可能不起作用，因为网站文档类型是 XHTML 1.0。但是，当我更改本地文件上的文档类型以匹配我正在使用的网站时， slider 仍然有效。
我也尝试过following the instructions here以编程方式设置选项，但即使在我的本地计算机上我也无法让它工作...我想我不知道足够的 JavaScript 来正确编写代码。
我很困惑，而且缺乏经验，不知道如何在没有任何帮助的情况下解决这个问题。有任何想法吗？
谢谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Soleil Cycle2 Carousel Pager</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.cycle2.js"></script>
<script type="text/javascript" src="../js/jquery.cycle2.carousel.js"></script>
<script type="text/javascript">
var jQuery_1_9_0 = $.noConflict(true);
jQuery_1_9_0(document).ready(function($){
var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
slideshows.not(this).cycle('goto', opts.currSlide);
});
$('#cycle-2 .cycle-slide').click(function(){
var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
slideshows.cycle('goto', index);
});
});
</script>
<style type="text/css">
#soleil-intro * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#soleil-intro #cycle-1 div { width:950px; }
#soleil-intro #cycle-2 .cycle-slide { border:3px solid #fff; }
#soleil-intro #cycle-2 .cycle-slide-active { border:3px solid #f6d609; }
#soleil-intro #soleil-slideshow-1 { max-width: 980px; margin: auto; z-index: 1; position: relative; }
#soleil-intro #soleil-slideshow-2 { max-width: 940px; margin: auto; z-index: 1; position: relative; margin-top: 10px; }
#soleil-intro .cycle-slideshow img { width: 100%; height: auto; display: block; }
#soleil-intro .arrow {float: left; width: 15px; position: relative; top: 200px;}
</style>
</head>
<body>
<div id="soleil-intro">
<div id="soleil-slideshow-1">
<p class="arrow">
<a href="#" class="cycle-prev">«</a>
</p>
<div style="float: left;" id="cycle-1" class="cycle-slideshow"
data-cycle-slides="> div"
data-cycle-timeout="0"
data-cycle-prev="#soleil-slideshow-1 .cycle-prev"
data-cycle-next="#soleil-slideshow-1 .cycle-next"
data-cycle-fx="scrollHorz"
>
<div><img src="../soleil1.jpg" width="980" height="425"></div>
<div><a href="test.html"><img src="../soleil2.jpg" width="980" height="425"></a></div>
<div><img src="../soleil3.jpg" width="980" height="425"></div>
<div><img src="../soleil4.jpg" width="980" height="425"></div>
<div><img src="../soleil5.jpg" width="980" height="425"></div>
<div><img src="../soleil3.jpg" width="980" height="425"></div>
<div><img src="../soleil4.jpg" width="980" height="425"></div>
</div>
<p class="arrow">
<a href="#" class="cycle-next"><img src="../arrow.gif" style="display:inline;" alt="arrow" height="12" width="16" border="0" /></a>
</p>
</div>
<div style="clear: both;"></div>
<div id="soleil-slideshow-2" style="clear: both;">
<div id="cycle-2" class="cycle-slideshow"
data-cycle-slides="> div"
data-cycle-timeout="0"
data-cycle-prev="#soleil-slideshow-2 .cycle-prev"
data-cycle-next="#soleil-slideshow-2 .cycle-next"
data-cycle-fx="carousel"
data-cycle-carousel-visible="3"
data-cycle-carousel-fluid="true"
data-allow-wrap="false"
>
<div><img src="../soleil1.jpg" width="100" height="100"></div>
<div><img src="../soleil2.jpg" width="100" height="100"></div>
<div><img src="../soleil3.jpg" width="100" height="100"></div>
<div><img src="../soleil4.jpg" width="100" height="100"></div>
<div><img src="../soleil5.jpg" width="100" height="100"></div>
<div><img src="../soleil3.jpg" width="100" height="100"></div>
<div><img src="../soleil4.jpg" width="100" height="100"></div>
</div>
</div>
</div> <!-- #soleil-intro -->
</body>
</html>
最佳答案
如果您提到要将其集成到哪个 CMS 中，将会很有帮助， 使用此代码:
需要将 noConflict 粘贴到 jquery.1.9 文件之后。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_9_0 = $.noConflict(true);
</script>
<script type="text/javascript" src="../js/jquery.cycle2.js"></script>
<script type="text/javascript" src="../js/jquery.cycle2.carousel.js"></script>
<script type="text/javascript">
jQuery_1_9_0(document).ready(function(){
var slideshows = jQuery_1_9_0('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
slideshows.not(this).cycle('goto', opts.currSlide);
});
jQuery_1_9_0('#cycle-2 .cycle-slide').click(function(){
var index = jQuery_1_9_0('#cycle-2').data('cycle.API').getSlideIndex(this);
slideshows.cycle('goto', index);
});
});
</script>
希望能解决问题。
这是更新后的 fiddle :http://jsfiddle.net/Z5cvq/8/
关于带有轮播的 jQuery Cycle2 插件无法工作；控制台中没有错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14510190/