當我爲引導包含jquery.js腳本需求時，JQuery循環插件停止工作

我一直試圖重新創建顯示here的jQuery循環插件。我也使用引導3.如果我刪除行<script type="text/javascript" src="static/js/jquery.js"></script>然後它的作品，但是，我需要這個我的響應式導航欄，真的不知道爲什麼它這樣做。以下是源代碼：實時頁面爲here。我一直在嘗試幾個小時纔得到這個，並且剛剛撞上了一堵磚牆。當我爲引導包含jquery.js腳本需求時，JQuery循環插件停止工作

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 



<!-- Bootstrap --> 
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css" /> 
<link href="static/css/bootstrap-theme.css" rel="stylesheet"> 
<link href="static/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<link href="static/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> 

<link rel="stylesheet" type="text/css" href="static/css/style.css"> 

<link rel="shortcut icon" href="./static/images/favicon.ico" type="image/x-icon"> 
<link rel="icon" href="./static/images/favicon.ico" type="image/x-icon"><title>JQuery Cycle Plugin - Basic Demo</title> 
<style type="text/css"> 
.slideshow { height: 232px; width: 232px; margin: auto } 
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } 
</style> 
<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
    }); 
}); 
</script> 
</head> 
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a id="nav-home" href="./index.html" class="navbar-brand">Home</a> 
     </div> 
     <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> 
      <ul class="nav navbar-nav"> 

       <li id="nav-resume"><a id="link" href="resume.html">Resume</a></li> 
       <li id="nav-projects"><a id="link" href="portfolio.php">Portfolio</a></li> 
       <li id="nav-contact"><a id="link" href="contact.html">Contact Me</a></li> 

      </ul> 
     </nav> 
    </div> 
</header> 
<div id="wrap"> 
<div class="container"> 
<!--container is ended in footer tag.--><body> 
    <div class="slideshow"> 
     <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" /> 
     <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" /> 
     <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" /> 
     <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" /> 
     <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" /> 
    </div> 

    </div> 
</div> 
<!-- 
<div id="footer"> 
    <div class="container"> 
     <p1 class="text-muted credit">&copy; 2013 michaelwashburnjr.com</p1> 
    </div> 
</div> 
--> 

<!-- Includes --> 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script type="text/javascript" src="static/js/jquery.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script type="text/javascript" src="static/js/bootstrap.min.js"></script> 
</body> 
</html>

[編輯]我現在用<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>代替<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>並具有相同的錯誤。

來源

2013-11-14 mdw7326

您正在使用jQuery __twice__。不要這樣做。 – Mathletics

您包括jQuery的在被摧毀的週期插件的方式看兩次。您有：

<!-- include jQuery library --> // FIRST INCLUDE 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 

... 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> // SECOND INCLUDE 
<script type="text/javascript" src="static/js/jquery.js"></script>

您應該所有腳本移至底部，包括他們正是如此：

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script type="text/javascript" src="static/js/jquery.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script type="text/javascript" src="static/js/bootstrap.min.js"></script> 

<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
    }); 
}); 
</script>

這樣，你的jQuery的第二個副本不破壞它的插件已在第一份副本上註冊。

來源

2013-11-14 16:18:28 Mathletics

這使我的幻燈片工作。你不會偶然地知道爲什麼第一張幻燈片比你其他的更大一些？我猜這只是自定義樣式與引導程序的混合 – mdw7326

jQuery的文件，你加載是老，引導需要更高版本在他們的亭子包"jquery": ">= 1.9.0"

https://developers.google.com/speed/libraries/devguide#jquery

來源

2013-11-14 15:18:04

@ user2278110用'' 「//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js」>' –

我照你所說的做了，不幸的是，它沒有工作，但是，感謝你的追捕，我當時使用的版本太低jquery – mdw7326

這不是問題;看到我的答案。 – Mathletics

當我爲引導包含jquery.js腳本需求時，JQuery循環插件停止工作

回答

相關問題