旋转木马无法工作的jQuery Cycle2插件；控制台中没有错误
旋转木马无法工作的jQuery Cycle2插件；控制台中没有错误
提问于 2013-01-25 04: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属性来传递选项，我认为它可能不起作用，因为站点文档类型是XHTML1.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>回答 2
Stack Overflow用户
发布于 2013-01-25 04:58:37
如果您提到要将其集成到哪个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>希望它能解决这个问题。
以下是更新后的小提琴：http://jsfiddle.net/Z5cvq/8/
Stack Overflow用户
发布于 2013-11-02 01:51:34
这个问题是在搜索我自己的jquery问题时提出的，但顺便说一句，您的幻灯片容器的开始cycle2标签中有一个拼写错误。在“data-cycle slides”属性的值域中，右尖括号过早地结束了DIV开始标记。它应该是：
<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"
>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14510190
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号