Fatal编程技术网
  • javascript/
  • Javascript 当我包含引导所需的JQuery.js脚本时，JQuery Cycle插件停止工作

Javascript 当我包含引导所需的JQuery.js脚本时，JQuery Cycle插件停止工作

javascript jquery html twitter-bootstrap

Javascript 当我包含引导所需的JQuery.js脚本时，JQuery Cycle插件停止工作,javascript,jquery,html,twitter-bootstrap,slideshow,Javascript,Jquery,Html,Twitter Bootstrap,Slideshow,我一直在尝试重新创建所示的jQuery循环插件。我也在使用bootstrap3。如果我删除了行，那么它就可以工作了，但是，我的响应导航栏需要它，我真的不知道它为什么这样做。这是源代码：而live页面是。我已经试了好几个小时才弄到这个，结果却碰上了一堵砖墙 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

我一直在尝试重新创建所示的jQuery循环插件。我也在使用bootstrap3。如果我删除了行
，那么它就可以工作了，但是，我的响应导航栏需要它，我真的不知道它为什么这样做。这是源代码：而live页面是。我已经试了好几个小时才弄到这个，结果却碰上了一堵砖墙

<!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>


JQuery循环插件-基本演示
.slideshow{高度：232px；宽度：232px；边距：自动}
.slideshow img{填充：15px；边框：1px实心#ccc；背景色：#eee；}
$（文档）.ready（函数（）{
$（'.slideshow'）。循环({
fx:‘淡入’//选择您的转换类型，例如：淡入、向上滚动、洗牌等。。。
});
});
切换导航

    

  • 

  • 

  •
[编辑]我现在使用的是
而不是
，并且有相同的错误。

您正在加载的jQuery文件很旧，引导程序需要更高的版本来查看它们的bower包
“jQuery”：“>=1.9.0”

您正在加载的jQuery文件很旧，引导程序需要更高版本的bower软件包查看它们的jQuery:“>=1.9.0”

您以破坏cycle插件的方式两次包含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>


$（文档）.ready（函数（）{
$（'.slideshow'）。循环({
fx:‘淡入’//选择您的转换类型，例如：淡入、向上滚动、洗牌等。。。
});
});
这样，jQuery的第二个副本就不会破坏在第一个副本中注册的插件。

以破坏cycle插件的方式包含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>


$（文档）.ready（函数（）{
$（'.slideshow'）。循环({
fx:‘淡入’//选择您的转换类型，例如：淡入、向上滚动、洗牌等。。。
});
});
这样，你的第二个jQuery副本就不会破坏第一个副本中注册的插件。

@user2278110将
替换为
，我按照你说的做了，不幸的是，它不起作用，但是，感谢你发现我使用的jQuery版本太低这不是问题；查看我的答案。@user2278110将
替换为
，我按照您所说的做了，不幸的是，它不起作用，但是，感谢您发现我使用的jquery版本太低这不是问题；请看我的答案。您包括jQuery两次。不要这样做。您将包含jQuery两次。别那么做，这让我的幻灯片很好用。你不会碰巧知道为什么第一张幻灯片比其他幻灯片大，你知道吗？我猜这是因为我的幻灯片是由定制风格和鞋带混合而成的。你不会碰巧知道为什么第一张幻灯片比其他幻灯片大，你知道吗？我猜这只是定制风格和引导的奇怪混合