来自googleapi的Jquery.min.js相互冲突

我使用两个不同的jquery.min.js文件从googleapi。一个用于幻灯片(s3Slider)，另一个用于当用户向下滚动时应该跟随的菜单。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>滑块

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>用于菜单

当我两个都有时，当向下滚动时，菜单会随着页面一起停止向下滚动…

解决方案吗?

下面是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>

解决方案是不同时加载。你只需要为菜单加载一个，滑块也会使用它。

把它放在你的源代码的<head>部分，以确保它加载时，你的两个插件需要它

就像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...

相关内容

最新更新

热门标签：