【发布时间】：2013-01-24 20:32:17
【问题描述】：
我正在尝试在网站上使用 jQuery Cycle2 插件，而且我对 jQuery 非常陌生，因此很难排除故障。我在 JavaScript 控制台中看不到任何错误。我的代码在下面和I also made a jsfiddle here which passed validation。它在本地工作，但是当我将其插入 OpenCMS 时，轮播中的幻灯片超出了它们的容器并且大小为 100%，并且没有任何内容是可点击的（这意味着即使单击过大的轮播图像也不会更改第一个 div 中的幻灯片，即坐在一切后面）。
我要插入的站点正在运行 jQuery 1.3.2，我无法更改或更新它，所以我使用了 noConflict。在我使用 noConflict 之前，网站的其他部分已经损坏并且滑块无法正常工作。现在网站的其他部分都可以，但滑块仍然无法正常工作。
滑块使用 div 上的 data 属性来传递选项，我认为它可能不起作用，因为站点文档类型是 XHTML 1.0。但是，当我更改本地文件上的文档类型以匹配我正在使用的站点时，滑块仍然有效。
我还尝试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>
【问题讨论】：
-
你确定你有正确的图片、css和javascript路径吗？它们是否真的存在于服务器上？
-
是的，我确定。如果你看一下小提琴，它在那里工作得很好。
-
您向我们展示的内容并不能解决您的问题。这只是示例代码。我抓住它并改变了路径，它工作正常。显然，我们需要查看实际代码 - 您插入它的位置，可能还有一些 css。
-
我粘贴的是我放入 OpenCMS 的内容，减去了 html、head 和 body 标签。我什至还没有开始担心 CSS。不幸的是，我无法向您展示整页。真的希望我这样做，因为这让我发疯。
-
好吧，你用的是什么浏览器？浏览器有调试工具吗？ （比如火狐需要安装Firebug，Chrome集成了调试工具，按F12看是否会在任一浏览器中弹出侧窗）
标签： jquery jquery-plugins plugins