【发布时间】：2013-04-28 05:21:06
【问题描述】：
Bootstrap 新手，不知道 Java/jQuery。 我在http://bootsnipp.com/snipps/carousel-extended 找到了这个很酷的 sn-p，但我搞砸了。视觉上一切看起来都很好，但幻灯片没有移动，点击缩略图也没有改变。我浏览了 html，没有任何东西跳出来，这让我觉得可能是 javascript？有人看到我缺少的东西吗？这可能是一个愚蠢的错误。谢谢！
<body>
<div id="wrapper">
<div class="container">
<!--logo-->
<header>
<div class="row">
<div class="span4 logo">
<a href="index.html"><img src="img/marlin-logo.png"></a>
</div>
<div class="span3 socialbox pull-right">
<div class="social-icons">
<a id="facebook" href="#"><img src="img/social_icons/facebook.png"></a>
<a href="#"><img src="img/social_icons/twitter.png"></a>
<a href="#"><img src="img/social_icons/flickr.png"></a>
<a href="#"><img src="img/social_icons/pinterest.png"></a>
<a href="#"><img src="img/social_icons/instragram.png"></a>
<a href="#"><img src="img/social_icons/mail.png"></a>
</div><!--end social-icons -->
</div><!--end span3 -->
</div><!--end row -->
</header>
<!--Nav-->
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li><a href="index.html">Home</a></li>
<li class="divider-vertical"></li>
<li class="active"><a href="about.html">About</a></li>
<li class="divider-vertical"></li>
<li><a href="contact.html">Contact</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Components<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
</ul>
</div>
</div>
</div>
<!--end Nav-->
</div>
<!--end container-->
<div class="container">
<!-- Slider -->
<div class="row-fluid">
<div class="span12" id="slider">
<!-- Top part of the slider -->
<div class="row-fluid">
<div class="span8" id="carousel-bounding-box">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0"><img src="http://placehold.it/770x300&text=one" /></div>
<div class="item" data-slide-number="1"><img src="http://placehold.it/770x300&text=two" /></div>
<div class="item" data-slide-number="2"><img src="http://placehold.it/770x300&text=three" /></div>
<div class="item" data-slide-number="3"><img src="http://placehold.it/770x300&text=four" /></div>
<div class="item" data-slide-number="4"><img src="http://placehold.it/770x300&text=five" /></div>
<div class="item" data-slide-number="5"><img src="http://placehold.it/770x300&text=six" /></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="span4" id="carousel-text"></div>
<div style="display: none;" id="slide-content">
<div id="slide-content-0">
<h2>Slider One</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-1">
<h2>Slider Two</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-2">
<h2>Slider Three</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-3">
<h2>Slider Four</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-4">
<h2>Slider Five</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
<div id="slide-content-5">
<h2>Slider Six</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
</div>
</div>
</div>
</div> <!--/Slider-->
<div class="row-fluid hidden-phone" id="slider-thumbs">
<div class="span12">
<!-- Bottom switcher of slider -->
<ul class="thumbnails">
<li class="span2">
<a class="thumbnail" id="carousel-selector-0">
<img src="http://placehold.it/170x100&text=one" />
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-1">
<img src="http://placehold.it/170x100&text=two" />
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-2">
<img src="http://placehold.it/170x100&text=three" />
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-3">
<img src="http://placehold.it/170x100&text=four" />
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-4">
<img src="http://placehold.it/170x100&text=five" />
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-5">
<img src="http://placehold.it/170x100&text=six" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div><!--end container-->
<div id="footer">
<p>© 2013 Blue Marlin Template designed by <a href="http://www.jannahill.com" target="_blank">Janna Hill</a> | All Rights Reserved. </p>
</div>
<!-- end footer -->
</div>
<!-- end wrapper -->
<!-- start: Java Script -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/flexslider.js"></script>
<script src="js/carousel.js"></script>
<!-- end: Java Script -->
<script>
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
</script>
【问题讨论】：
-
您的 Javascript 中有未注释的 Javascript 文件的名称、不会在 Javascript 中转义的 HTML 注释、没有库（包括 jQuery 和 Bootstrap.js），而且您是缺少
jQuery中的j。 -
感谢您的帮助，但我实际上不明白如何解决这些问题（除了缺少的 j），因为我正在复制/粘贴代码并且不知道 javascript。有什么办法可以解释我需要改变的地方吗？ jannahill.com/bluemarlin/about.html 显示正在发生的事情。
-
我在jsfiddle.net/markusm/VvdBH 创建了一个原始代码的jsfiddle。我的建议是开始使用它，然后您可以在将更改应用到您的网站之前查看更改的效果。关于 JavaScript 和 jQuery 的一点点背景知识也可能是不可避免的。看看漂亮的 w3scools 教程：w3schools.com/js/default.asp
-
谢谢。我尝试粘贴您的代码并得到相同的结果。轮播不会移动，单击缩略图也不会改变任何内容。我会尝试看 tut，但我什至不知道该尝试和更改什么。
-
您是否引用了必要的 javascript 库并将原始脚本包含在您的 html 页面中？在 jsfiddle 中，这是分开的。在包含 之前，您必须至少包含 jquery 和 bootstrap.js
标签： javascript html twitter-bootstrap carousel