使用Scrollorama with Cycle Plugin和jQuery.noConflict（）

Question

當我將Scrollorama插件合並到我的網頁中時，Cycle插件停止運行。 我嘗試合並jQuery.noConflict但它仍然無法正常工作。 我是否實現了jQuery.noConflict（）錯誤或者是其他什么？：

鏈接：

<link rel="stylesheet"  href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<link href='http://fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/jquery.scrollorama.js"></script>

Scrollorama插件：

<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
var scrollorama = $j.scrollorama({
    blocks:'.scrollblock'
});
});
</script>

循環插件：

<script>

$(function(){

$('#play').click(function(){ $('#slider').cycle('resume'); return false;}); 

$('#pause').click(function(){ $('#slider').cycle('pause'); return false;});

$('#slider').cycle({
  fx:       'scrollHorz',
  next:     '#next',
  prev:     '#previous',
  pager:    '#pager',
  timeout:  5000,
  speed:    500
});
});
</script>

我曾嘗試過去從不同的問題中做出不同的選擇，但沒有一個能奏效。 這可能是插件的問題，而不是我如何將它們實現到我的網站？

Answer 1

我遇到了與superscrollorama相同的問題，幾周以來我都無法破解它，直到我發現了控制台。 控制台允許我跟蹤所有JS錯誤。

如果按此順序嵌入文件：

<link rel="stylesheet"  href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<link href='http://fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript">
  jQuery.noConflict();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/jquery.scrollorama.js"></script>

然后將所有代碼放入：

(function($){

})(jQuery);

例：

(function($){
  $(document).ready(function() {
    var scrollorama = $j.scrollorama({
      blocks:'.scrollblock'
    });
  });

  $('#play').click(function(){ $('#slider').cycle('resume'); return false;}); 

  $('#pause').click(function(){ $('#slider').cycle('pause'); return false;});

  $('#slider').cycle({
    fx:       'scrollHorz',
    next:     '#next',
    prev:     '#previous',
    pager:    '#pager',
    timeout:  5000,
    speed:    500
  });
})(jQuery);

它應該工作正常。

對於superscrollorama ，該示例將jQuery嵌入到正文中。 對於頁面上的額外jQuery插件，需要按以下順序將TweenMax和jquery.min移動到頭部：

<head>
  ... Your Meta, CSS files, ...
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
  <script type="text/javascript">
    jQuery.noConflict();
  </script>
  <script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
  ... Your other jQuery files, mootools, ...
</head>

您的CSS文件可能出現在jQuery.noConflict();上方或下方jQuery.noConflict(); 但是你的所有jQuery必須出現在TweenMax之后。

jquery.lettering-0.6.1.min.js和jquery.superscrollorama.js可能會保留在正文中。 只記得添加(function($){ ... })(jQuery); 圍繞你的所有代碼：

(function($){
    $(document).ready(function() {
        // set rotation of flash
        TweenMax.set("#newversion", {rotation: 15});
    ... and so on ...
})(jQuery);

使用Scrollorama with Cycle Plugin和jQuery.noConflict（）

問題描述

1 個解決方案

解決方案1
3 已采納 2015-06-11 07:39:35

使用Scrollorama with Cycle Plugin和jQuery.noConflict（）

問題描述

1 個解決方案

解決方案1 3 已采納 2015-06-11 07:39:35

解決方案1
3 已采納 2015-06-11 07:39:35