来自googleapis的jquery.min.js相互冲突_Jquery_Html_Google Api_Conflict_Image Gallery

来自googleapis的jquery.min.js相互冲突

jquery html google-api

来自googleapis的jquery.min.js相互冲突,jquery,html,google-api,conflict,image-gallery,Jquery,Html,Google Api,Conflict,Image Gallery,我正在使用来自googleapis的两个不同的jquery.min.js文件。一个用于幻灯片放映（s3Slider），另一个用于当用户向下滚动时应跟随allong的菜单滑块的用于菜单当我有两个菜单时，当其中一个向下滚动时，菜单就不会随着页面一起向下滚动有什么解决办法吗下面是HTML： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;

我正在使用来自googleapis的两个不同的jquery.min.js文件。一个用于幻灯片放映（s3Slider），另一个用于当用户向下滚动时应跟随allong的菜单

滑块的

用于菜单

当我有两个菜单时，当其中一个向下滚动时，菜单就不会随着页面一起向下滚动

有什么解决办法吗

下面是HTML：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> </title>

<link rel="stylesheet" type="text/css" href="assets/styles/style.css" media="screen" />

<link rel="stylesheet" type="text/css" href="assets/styles/jquery.fancybox-1.3.4.css" media="screen" />

<link rel="stylesheet" type="text/css" href="assets/styles/imgsldr.css" media="screen" />



<!--[if lt IE 9]><script type="text/javascript" src="assets/scripts/modernizr.js"></script><![endif]-->
</head>
<body>
<div class="wrapper">
  <header>
    <blockquote>Genom att förena två sjöer skapar vi en framtid mitt i landbygden!</blockquote>
</p></div><br></div>
  </header>
  <div class="nav-container">
    <nav>
      <ul>
        <li><a href="#hem" class="selected">Hem</a></li>
        <li><a href="#om">Om projektet</a></li>
        <li><a href="#sponsor">Sponsorer</a></li>
        <li><a href="#galleri">Galleri</a></li>
        <li><a href="#medlem">Bli medlem</a></li>
        <li><a href="#styr">Styrelse och funkt.</a></li>
        <li><a href="#kontakt">Kontakt</a></li>
      </ul>
      <div class="nav-left"></div>
      <div class="nav-right"></div>
      <div class="nav-above"></div>
    </nav>
  </div>
  <section id="hem">
    <div class="row">
      <div class="three columns">
        <h4>Hem</h4>
        <p>&nbsp;</p>
          <div id="nyheter">
            <p id="nyheterp">NYHETER</p>
            <p><br>
            </p>
            <h5>Nyhet #1</h5>

        </div>
      </div>
      <div class="nine columns">
        <h4>Bilder från projektet </h4>

        <!-- begins slider -->

        <div id="slider">
        <ul id="sliderContent">
            <li class="sliderImage">
                <img src="assets/gallery/1.jpg" alt="Bild 1" />
                <span class="top"><strong>Bild #1</strong><br />Beskrivning...</span>
            </li>
            <li class="sliderImage">
                <img src="assets/gallery/2.jpg" alt="Bild 2" />
                <span class="top"><strong>Bild #2</strong><br />Beskrivning...</span>
            </li>
            <li class="sliderImage">
                <img src="assets/gallery/3.jpg" alt="Bild 3" />
                <span class="top"><strong>Bild #3</strong><br />Beskrivning...</span>
            </li>
            <li class="sliderImage">
                <img src="assets/gallery/4.jpg" alt="Bild 4" />
                <span class="top"><strong>Bild #4</strong><br />Beskrivning...</span>
            </li>
            <li class="sliderImage">
                <img src="assets/gallery/5.jpg" alt="Bild 5" />
                <span class="top"><strong>Bild #5</strong><br />Beskrivning...</span>
            </li>
            <div class="clear sliderImage"></div>
        </ul>
      </div>

        <!--end slider --> 

  <footer>

    <a href="#" target="_blank"><img src="assets/images/facebook.png" alt="Facebook" /></a>
    <a href="#" target="_blank"><img src="assets/images/twitter.png" alt="Twitter" /></a> 

  </footer>
</div>




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="assets/scripts/jquery.fancybox-1.3.4.pack.js"></script> 
<script type="text/javascript" src="assets/scripts/jquery.scrollTo-1.4.2-min.js"></script> 
<script type="text/javascript" src="assets/scripts/waypoints.min.js"></script> 
<script type="text/javascript" src="assets/scripts/navbar.js"></script> 
<script type="text/javascript" src="assets/scripts/functions.js"></script>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/scripts/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
</script>

</body>
</html>


基诺姆·阿特·弗雷纳电视台（Genom att förena tvåsjöer skapar vi en framtid mitt i landbygden）！











褶边

尼赫特



尼赫特1
Bilder från项目


Bild#1
别开生面。。。


《图片报》2。。。


《图片报》第三版。。。


《图片报》4。。。


《图片报》5。。。


$（文档）.ready（函数（）{
$（“#滑块”）.s3Slider({
超时：3000
});
});

解决方案是不要同时加载这两个文件。您所需要的只是为菜单加载的菜单，滑块也将使用它

将它放在源代码的

部分，以确保在两个插件需要时加载它。

如Martin所说，将脚本放在HTML的标记中，否则它将在运行HTML DOM后执行

下面是一段代码片段

    <!DOCTYPE HTML>
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title> </title>

        <link rel="stylesheet" type="text/css" href="assets/styles/style.css" media="screen" />

        <link rel="stylesheet" type="text/css" href="assets/styles/jquery.fancybox-1.3.4.css" media="screen" />

        <link rel="stylesheet" type="text/css" href="assets/styles/imgsldr.css" media="screen" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
        <script type="text/javascript" src="assets/scripts/jquery.fancybox-1.3.4.pack.js"></script> 
        <script type="text/javascript" src="assets/scripts/jquery.scrollTo-1.4.2-min.js"></script> 
        <script type="text/javascript" src="assets/scripts/waypoints.min.js"></script> 
        <script type="text/javascript" src="assets/scripts/navbar.js"></script> 
        <script type="text/javascript" src="assets/scripts/functions.js"></script>
        <script type="text/javascript" src="assets/scripts/s3Slider.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('#slider').s3Slider({
                    timeOut: 3000
                });
            });
        </script>

        <!--[if lt IE 9]><script type="text/javascript" src="assets/scripts/modernizr.js"></script><![endif]-->
        </head>
        <body>

//Continue Rest of your code here...


$（文档）.ready（函数（）{
$（“#滑块”）.s3Slider({
超时：3000
});
});
//在此处继续您的其余代码。。。

为什么两者都使用？您应该只使用一个，并且应该只使用一个，并且应该使用最新的一个，所有这些都应该在您的代码html部分的元素中声明。我已经尝试过了，但滑块不起作用。。。我想知道这是不是变量问题？嗨！我已经试过了，当我拿出SliderGoogleAPI脚本时，它就停止工作了。顺便说一句，java正在页面底部加载。这有区别吗？（如果这是一个愚蠢的问题，很抱歉！）在您的帖子中添加HTML源代码的相关部分。您发布的代码不是加载了两个jQuery库的代码。您是对的。我很抱歉！但这是因为我已经在用另一种方法解决这个问题：在没有jquery的情况下添加img滑块。但是代码现在已经更新了！如果您希望为将来的参考指出解决方案，我将不胜感激！所以你的意思是我应该把'一直放在头里面？那么，为什么越来越多地使用在页脚之后和元素之前调用所有的？是的，如果您希望页面加载快速，让DOM先加载，这是正确的。建议将其放置在底部，但出于调试目的，您希望查看jQuery是否尽快执行，因此将其放入头部将首先加载它