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必须出现在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 个答案: