Question

这是我的第一个问题，所以我会尝试尽可能具有描述性......我正在使用Joomla的jQuery Cycle Plugin。它完全在IE7中爆炸。虽然它似乎在Chrome中完美运行，但在检查控制台时我注意到以下错误。

Uncaught TypeError: Cannot read property 'cycleW' of undefined

幻灯片显示在Chrome 17.0.963.56，Firefox 9.0.1和Safari 5.1.3中可用。我没有在IE8 +中测试它，因为我没有一台Windows计算机可以轻松访问。我正在标题中调用带有外部js文件的幻灯片，就像这样......

<head>
        <script type="text/javascript" src="js/jquery.min.js" /></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
        <script type="text/javascript" src="js/init.js"></script>
</head>

这是init.js：

$(document).ready(function() { 

    $('#slideshow').cycle({ 
        fx:        'fade', 
        speed:     '900', 
        timeout:   4000,
        pause:     1, 
        pager:     '#nav',
        slideExpr: 'div.slide',
        next:      '#forward', 
        prev:      '#backward',
    });

    $('#slideshow').hover(function() {
        $("#backward").fadeIn(400);
        $("#forward").fadeIn(400);
    },
        function() {
        $("#backward").fadeOut(300);
        $("#forward").fadeOut(300);
    });

    $('#imax').before('<ul id="nav_imax">').cycle({ 
        fx:        'scrollHorz', 
        speed:     '1000', 
        timeout:   5000,
        pause:     1, 
        pager:     '#nav_imax',
        slideExpr: 'div.slide',

        // callback fn that creates a thumbnail to use as pager anchor
        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '" width="50" height="50" /></a></li>';
        },

    });

});

最后，这是标记。 “moduletable”和“custom”div由CMS生成。但是，我的slideExpr应该绕过那些，因为它应该使用“幻灯片”类来定位div。

<div id="slideshow">
    <div id="nav"></div>
    <a id="backward">Backward</a>
    <a id="forward">Forward</a>
    <div class="moduletable">
        <div class="custom">
            <div class="slide"><a href="#"><img src="01.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="02.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="03.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="04.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="05.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="06.jpg" width="860" height="400" border="0" /></a></div>
        </div>
    </div>
</div>

我希望我能涵盖所有内容。如果我能提供任何其他有用的信息，请告诉我。谢谢！

更新：我最初没有提到我正在使用ID为“imax”的另一张幻灯片以及另一页上的备用参数。由于这些不在同一页面，我没有包括它。但是当我注释掉$（'＃imax'）函数时，错误会在Chrome，FF等中消失。幻灯片仍然无法在IE7中运行...

所以我认为这实际上是两个问题......

以下是测试链接：http://jsfiddle.net/V6EeS/3/

Answer 1

我想出了IE7的问题。最后一个参数选项不应该有逗号（，）。我不知道为什么Chrome仍然会给我错误，但至少幻灯片在每个浏览器中都是独立运行的。

$(document).ready(function() { 

    $('#slideshow').cycle({ 
        fx:        'fade', 
        speed:     '900', 
        timeout:   4000,
        pause:     1, 
        pager:     '#nav',
        slideExpr: 'div.slide',
        next:      '#forward', 
        prev:      '#backward' // Comma has been removed
    });

    $('#slideshow').hover(function() {
        $("#backward").fadeIn(400);
        $("#forward").fadeIn(400);
    },
        function() {
        $("#backward").fadeOut(300);
        $("#forward").fadeOut(300);
    });

    $('#imax').before('<ul id="nav_imax">').cycle({ 
        fx:        'scrollHorz', 
        speed:     '1000', 
        timeout:   5000,
        pause:     1, 
        pager:     '#nav_imax',
        slideExpr: 'div.slide',

        // callback fn that creates a thumbnail to use as pager anchor
        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '" width="50" height="50" /></a></li>';
        }  // Comma has been removed

    });

});

以下是工作链接：http://jsfiddle.net/V6EeS/4/

jQuery Cycle插件 - 错误

1 个答案: