Question

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

<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>对于菜单

如果我同时使用这两个菜单，当菜单向下滚动时，菜单会停止与页面同步...

任何解决方案？

Bellow遵循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>

Answer 1

解决方案是不加载两者。你需要的只是为菜单加载的那个，滑块也会使用它。

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

Answer 2

就像马丁所说的那样，将脚本放在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...

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

2 个答案: