-1

我正在尝试在我的网站中添加一个使用 jQuery v1.8.3 的 Wowslider 的照片滑块，该滑块有一个基于 jQuery 的导航菜单，但我不知道确切的版本（这是我获取源文件的教程）

当注释掉两个 jquery.js 文件之一时，另一个工作正常。但是，一起出现了问题，我无法让 Wowoslider 中的滑块和动画菜单一起正常工作。

我的 HTML 中的代码就是这些。问题来自 js/jquery.js（未知版本）和 engine1/jquery.js（1.8.3 版本）

<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-bp.js"></script>
    <script type="text/javascript" src="js/navigation.js"></script>
    <script type="text/javascript" src="date_time.js"></script>
    <!-- Start WOWSlider.com HEAD section -->
    <link rel="stylesheet" type="text/css" href="engine1/style.css" />
    <script type="text/javascript" src="engine1/jquery.js"></script>
    <!-- End WOWSlider.com HEAD section -->
</head>

我试试这个我可以在同一页面上使用多个版本的 jQuery 吗？

解决方案似乎很简单，但我无法理解

然后，而不是$('#selector').function();，你会做jQuery_1_3_2('#selector').function();or jQuery_1_1_3('#selector').function();。

我在我的 html 中更改包含脚本代码，如下所示：

<!-- load jQuery 1.2.3 -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    var jQuery_1_2_3 = $.noConflict(true);
    </script>
            <!-- ...other code... -->
    <!-- load jQuery 1.8.3 -->
    <script type="text/javascript" src="engine1/jquery.js"></script>
    <script type="text/javascript">
    var jQuery_1_8_2 = $.noConflict(true);
    </script>

然后我尝试更改使用 jQuery 1.2.3 的 2 个 .js 文件的代码，所以我$用这个替换所有字符jQuery_1_2_3

排序示例默认为

(function($) { $.extend($.fx.step,{ backgroundPosition: function(fx) { if (fx.state === 0 && typeof fx.end == 'string') { var start = $. curCSS(fx.elem,'backgroundPosition');

我改为：

(function(jQuery_1_2_3) { jQuery_1_2_3.extend(jQuery_1_2_3.fx.step,{ backgroundPosition: function(fx) { if (fx.state === 0 && typeof fx.end == 'string') { var start = jQuery_1_2_3.curCSS(fx.elem,'backgroundPosition');

我想我理解错了..钢铁不工作..

4

1 回答 1

0

在这里，我想出了一个由我自己测试的解决方案。我检查了您的菜单教程并下载了源代码，然后我在同一页面中使用了 Wow Slider，但我的方式是：

// 在头顶添加以下代码

<!-- Navigation Menu-->
<link rel="stylesheet" href="css/main.css" type="text/css" />   
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery-bp.js" ></script>
<script type="text/javascript" src="js/navigation.js" ></script>
<!-- End Navigation -->

// 并在页面底部添加 Wow Slider 脚本

<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->

现在在“navigation.js”中做一些改变

1）写里面的所有函数

(function($) {
  $(function() {
  // all navigation function put here

  });
})(jQuery);
// other code using $ as an alias to the other library

代替

$(document).ready(function(){

});

我在此链接上为您上传了我的代码。请下载并让我知道它是否适合您.. 对我来说，它适用于 Chrome 和 Firefox。

于 2013-02-07T08:43:44.420 回答