Javascript 将Scrollorama与Cycle插件和jQuery.noConflict（）一起使用_Javascript_Jquery

Javascript 将Scrollorama与Cycle插件和jQuery.noConflict（）一起使用

javascript jquery

Javascript 将Scrollorama与Cycle插件和jQuery.noConflict（）一起使用,javascript,jquery,Javascript,Jquery,当我将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:/

当我将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>


var$j=jQuery.noConflict（）；
$j（文档）.ready（函数（）{
var scrollorama=$j.scrollorama({
块：'.scrollblock'
});
});

循环插件：

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


$（函数（）{
$（'#play'）。单击（函数（）{$（'#滑块'）。循环（'resume'）；返回false；}）；
$（'pause'）。单击（函数（）{$（'slider'）。循环（'pause'）；返回false；}）；
$（“#滑块”）。循环({
fx:‘滚动人’，
下一个：“#下一个”，
上一篇：“#上一篇”，
寻呼机：“#寻呼机”，
超时：5000，
速度：500
});
});

在过去，我尝试过从不同的问题中选择不同的选项，但都不起作用。这可能是插件的问题，而不是我如何在我的站点中实现插件的问题吗？

我也有同样的问题，几个星期以来我一直无法破解它，直到我发现了控制台。控制台允许我跟踪所有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($){
  $(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);

它应该很好用

例如，该示例将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>

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

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