Question

我正在尝试在网站上使用jQuery Cycle2插件，而且我对jQuery很新，因此很难排除故障。我在JavaScript控制台中没有看到任何错误。我的代码位于I also made a jsfiddle here which passed validation下方。它在本地工作但是当我将其插入OpenCMS时，旋转木马中的幻灯片超出了他们的容器并且大小为100％，并且没有任何东西可以点击（意味着即使点击超大的旋转木马图像也不会改变第一个div中的幻灯片，这是坐在一切之后）。

我正在插入的网站正在运行jQuery 1.3.2并且我无法更改或更新它，所以我使用noConflict。在我使用noConflict之前，网站的其他部分正在破坏并且滑块不起作用。现在网站的其他部分都可以，但滑块仍然无法正常工作。

滑块使用div上的data属性来传递选项，我想也许它不起作用，因为站点doctype是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">&laquo;</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>

Answer 1

如果您提到要将哪个CMS集成到其中，那将会很有帮助，使用此代码：

需要在jquery.1.9文件之后粘贴noConflict。

<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/

Answer 2

这个问题出现在我自己的jquery cycle2问题的搜索中，但是顺便说一下，你的幻灯片容器的开放DIV标签中有一个拼写错误。在'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"
                >

带旋转木马的jQuery Cycle2插件不工作;控制台没有错误

2 个答案: