jQuery Cycle插件 - 錯誤

這是我的第一個問題，所以我會盡量做到儘可能描述......我使用的是Joomla的jQuery Cycle Plugin。它在IE7中完全炸燬。雖然它在Chrome中看起來很完美，但在檢查控制檯時我發現了以下錯誤。jQuery Cycle插件 - 錯誤

Uncaught TypeError: Cannot read property 'cycleW' of undefined

幻燈片出現在Chrome 17.0.963.56，火狐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>'; 
     }, 

    }); 

});

最後，這裏的標記。「模塊表」和「自定義」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/

來源

2012-02-21 Patrick Appelman

從另一臺服務器不負載的jQuery。請確保jquery首先被下載/複製coad並加載到服務器上的文件 – ggzone 2012-02-21 14:40:19

@ggzone這不是問題。 jQuery首先被加載。但是，我調整了標記以調用本地託管版本的jQuery，並且仍然收到相同的錯誤。有什麼想法嗎？ – 2012-02-21 15:52:48

hm也許你使用了一些不兼容的版本，或者其中一個js文件不正確或缺失。因爲這是一個非常常見的插件，我不認爲這是一個錯誤。 – ggzone 2012-02-21 15:58:56

我想通了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/

來源

2012-02-21 22:36:27

jQuery Cycle插件 - 錯誤

回答

相關問題