我有一个包含a和li标签的jquery / CSS轮播。似乎所有东西都在html和样式方面正确显示但似乎jquery没有加载b / c在旋转木马上没有功能。我已经尝试查看Firebug中的脚本选项卡，并且只能看到我正在调用的谷歌库中的jquery js库v1.6.2未列出的断点。我是一名设计师，正在努力学习更多开发，所以我们非常感谢您的帮助！谢谢，
这是我的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hiLounge</title>
<link href="/css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/touchcarousel.css" rel="stylesheet" type="text/css" />
<link href="css/black-and-white-skin.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.touchcarousel-1.2.min.js" type="text/javascript"></script>
<script src="js/cufon.js" type="text/javascript"></script>
<script src="js/League_Gothic_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace ('h1', 'h2', 'ul#nav li');
</script>
<script>
jQuery(function($) {
$("#carousel").touchcarousel({
itemsPerMove: 4,
pagingNav: true, // Enable paging nav. Overrides snapToItems.
// Snap to first item of every group, based on itemsPerMove.
pagingNavControls: true, // Paging controls (bullets).
autoplay:true, // Autoplay enabled.
autoplayDelay:3000, // Delay between transitions.
autoplayStopAtAction:true, // Stop autoplay forever when user clicks arrow or does any other action.
scrollbar: true, // Scrollbar enabled.
scrollbarAutoHide: false, // Scrollbar autohide.
scrollbarTheme: "light", // Scrollbar color. Can be "light" or "dark".
transitionSpeed: 600, // Carousel transition speed (next/prev arrows, slideshow).
directionNav:true, // Direction (arrow) navigation (true or false).
directionNavAutoHide:false, // Direction (arrow) navigation auto hide on hover.
// On touch devices arrows are always displayed.
loopItems: false, // Loop items (don't disable arrows on last slide and allow autoplay to loop).
keyboardNav: false, // Keyboard arrows navigation.
dragUsingMouse:true, // Enable drag using mouse.
scrollToLast: true, // Last item ends at start of carousel wrapper.
itemFallbackWidth: 500, // Default width of the item in pixels. (used if impossible to get item width).
baseMouseFriction: 0.0012, // Container friction on desktop (higher friction - slower speed).
baseTouchFriction: 0.0008, // Container friction on mobile.
lockAxis: true, // Allow dragging only on one direction.
useWebkit3d: false, // Enable WebKit 3d transform on desktop devices.
// (on touch devices this option is turned on).
// Use it if you have only images, 3d transform makes text blurry.
onAnimStart: null, // Callback, triggers before deceleration or transition animation.
onAnimComplete: null, // Callback, triggers after deceleration or transition animation.
onDragStart:null, // Callback, triggers on drag start.
onDragRelease: null // Callback, triggers on drag complete.
});
});
</script>
<style rel="stylesheet" type="text/css">
body {
background: #ffffff;
text-align: center;
font-family: helvetica, arial, sans-serif;
line-height: 25px;
margin-top: 0px;
}
h1 {
font-size: 34px;
line-height: 24px;
color: #007a3d;
}
a:link {
color: #007a3d;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #007a3d;
}
#container {
width: 960px;
margin: auto;
text-align: center;
}
#container #godbar {
width: 960px;
height: 32px;
margin: auto;
position: fixed;
background: url(images/godbar_bg.jpg) repeat-x;
border-left: 1px solid #dbc25e;
border-bottom: 1px solid #dbc25e;
border-right: 1px solid #dbc25e;
}
#container #godbar #godbarIcons {
width: 100%;
height: 32px;
float: right;
text-align: right;
margin-top: 5px;
margin-right: 5px;
}
#container #godbar #godbarIcons ul {
display: inline;
}
#container #godbar #godbarIcons li {
display: inline;
padding-right:13px;
}
#container #header {
width: 960px;
height: 150px;
margin-bottom: 0;
padding-bottom: 0;
}
#container #logo {
width: 233px;
height: 94px;
margin: 0;
padding: 0;
padding-top: 35px;
}
#container #header #logo h1{
width: 233px;
height: 94px;
clear: both;
display: block;
margin: 0 0 0 15px;
background: url(images/logo.jpg) no-repeat;
text-indent: -9999px;
}
#container #header #logo h1 a {
display: block;
width: 233px;
height: 94px;
}
#container ul#nav {
width: 100%;
height: 44px;
text-align: center;
margin: 0 auto;
padding: 0;
background: url(images/navigation_bg.jpg) repeat-x;
list-style: none;
display: block;
}
#container ul#nav a:hover {
text-decoration: none;
}
#container ul#nav li {
margin-top: 5px;
display: inline-block;
float: left;
text-align: center;
padding-top: 5px;
padding-right: 0;
padding-left: 15px;
text-transform: uppercase;
}
#container ul#nav a {
color: #FFF;
}
#container carousel {
position: relative;
width: 100%;
margin: 0 auto;
}
#container #carousel li {
display: inline;
list-style: none;
margin: 0 auto;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<!--GODBAR-->
<div id="godbar">
<div id="godbarIcons">
<ul>
<li id="godbarFacebook"><a href="http://www.facebook.com/hilounge" target="_blank"><img src="images/godbar_fb.png" alt="hilounge on Facebook" /></a>
</li>
<li id="godbarTwitter"><a href="http://www.twitter.com/hilounge" target="_blank"><img src="images/godbar_twitter.png" alt="hilounge on Twitter"/></a>
</li>
<li id="godbarInstagram"><a href="http://www.instagram.com/hilounge" target="_blank"><img src="images/godbar_instagram.png" alt="hilounge on Instagram" /></a>
</li>
<li id="godbarPinterest"><a href="http://www.pinterest.com/hilounge" target="_blank"><img src="images/godbar_pinterest.png" alt="hilounge on Pinterest" /></a>
</li>
<li id="godbarGplus"><a href="https://plus.google.com/b/108830451064104477365/108830451064104477365/posts" target="_blank"><img src="images/godbar_gplus.png" alt="hilounge on Goolge plus" /></a>
</li>
<li id="godbarRss"><a href="http://feeds.feedburner.com/hilounge" target="_blank"><img src="images/godbar_rss.png" alt="hilounge RSS feed" /></a>
</li>
<li id="godbarEmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=hilounge&loc=en_US" target="_blank"><img src="images/godbar_email.png" alt="hilounge email" /></a>
</li>
</ul>
</div>
<!--END GODBARICONS-->
</div>
<!--END GODBAR-->
<!--BEGIN HEADER-->
<div id="header">
<!--BEGIN LOGO-->
<div id="logo">
<h1><a href="index.html">hiLounge</a></h1>
</div>
<!--END LOGO-->
<!--BEGIN NAVIGATION-->
<ul id="nav">
<h2 class="nav"><li><a href="#"> News </a></li>
<li><a href="#"> Entertainment </a></li>
<li><a href="#"> Fashion </a></li>
<li><a href="#"> Munchies </a></li>
<li><a href="#"> Design </a></li>
<li><a href="#"> Reviews </a></li>
<li><a href="#"> Contests </a></li>
</h2>
</ul>
<!--END NAVIGATION-->
</div>
<!--END HEADER-->
<!--BEGIN CAROUSEL-->
<div id="carousel" class="touchcarousel black-and-white">
<ul class="touchcarousel container">
<!-- TouchCarousel items, place any HTML content inside them (img tag is inserted as an example) -->
<li class="touchcarousel-previous">
<img src="images/previous.jpg" width="20" height="184" />
</li>
<li class="touchcarousel-item">
<a href="#"><img src="images/carousel-image.png" width="184" height="184" /></a>
</li>
<li class="touchcarousel-item">
<a href="#"><img src="images/carousel-image2.png" width="184" height="184" /></a>
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image.png" width="184" height="184" />
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image2.png" width="184" height="184" />
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image.png" width="184" height="184" />
</li>
<li class="touchcarousel-next">
<img src="images/next.jpg" width="20" height="184" />
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image2.png" width="184" height="184" />
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image.png" width="184" height="184" />
</li>
<li class="touchcarousel-next">
<img src="images/next.jpg" width="20" height="184" />
</li>
</ul>
</div>
<!--END CAROUSEL-->
<!--BEGIN MAIN-->
<div id="primaryContent">
<h1><a href="#"> 10 Best Bongs You Wish You Made</a></h1>
<a href="#"><img src="images/featured-post-featured-image.png" alt="Post Title" /></a>
<!--BEGIN POSTMETADATA-->
<div id="postMetaData">
<ul>
<li><img src="images/date-icon.jpg" /> March 26, 2013</li>
<li><a href="#"><img src="images/category-icon.jpg" /> Entertainment</a></li>
<li><a href="#"><img src="images/author-icon.jpg" /> James Scaggs</a></li>
</ul>
</div>
<!--END POSTMETADATA-->
<p>
In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and...
<a href="#"> Read More</a>
</p>
<!--BEGIN POSTSHARINGBUTTONS-->
<div id="postSharingButtons">
<ul>
<li>Like</li>
<li>Tweet</li>
<li>G+</li>
<li>Pin it</li>
</ul>
</div>
<!--END POSTSHARINGBUTTONS-->
<a href="#"><img src="images/read-more.jpg" /> Read More </a>
<!-- BEGIN RECENTPOSTS-->
<h2>Recent Posts</h2>
<div id="recentPosts">
<h1><a href="#">5 MUST FOLLOW MARIJUANA FACEBOOK PAGES</a></h1>
<img src="images/featured-image-1.png" alt="post-title" />
<!--BEGIN RECENTPOSTMETADATA-->
<div id="recentPostMetaData">
<ul>
<li><img src="images/date-icon.jpg" /> March 26, 2013</li>
<li><a href="#"><img src="images/category-icon.jpg" /> Entertainment</a></li>
<li><a href="#"><img src="images/author-icon.jpg" /> James Scaggs</a></li>
</ul>
</div>
<!--END RECENTPOSTMETADATA-->
<p>
In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and...
<a href="#"> Read More</a>
</p>
<!--BEGIN POST SHARING BUTTONS-->
<div id="postSharingButtons">
<ul>
<li>Like</li>
<li>Tweet</li>
<li>G+</li>
<li>Pin it</li>
</ul>
</div>
<!--END POST SHARING BUTTONS-->
<h1><a href="#">7 MARIJUANA INFOGRAPHICS YOU DON'T WANT TO MISS</a></h1>
<img src="images/featured-image-1.png" alt="post-title" />
<!--BEGIN RECENTPOSTMETADATA-->
<div id="recentPostMetaData">
<ul>
<li><img src="images/date-icon.jpg" /> March 26, 2013</li>
<li><a href="#"><img src="images/category-icon.jpg" /> Entertainment</a></li>
<li><a href="#"><img src="images/author-icon.jpg" /> James Scaggs</a></li>
</ul>
</div>
<!--END RECENTPOSTMETADATA-->
<p>
In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and...
<a href="#"> Read More</a>
</p>
<!--BEGIN POST SHARING BUTTONS-->
<div id="postSharingButtons">
<ul>
<li>Like</li>
<li>Tweet</li>
<li>G+</li>
<li>Pin it</li>
</ul>
</div>
<!--END POSTSHARINGBUTTONS-->
</div>
<!--END RECENTPOSTS-->
</div>
<!--END MAIN-->
</div>
<!--END CONTAINER-->
<div id="footerWrap">
<div id="footer">
<div id="footerLogo">
<a href="index.html"><img src="images/footer-logo.jpg" alt="hiLounge" /></a>
</div> <!--end footerLogo-->
<p>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
<a href="#">Legal</a>
<a href="#">Advertising</a>
</p>
<p id="footerInfo">copyright (c) 2013 <a href="http://www.hilounge.com">hiLounge</a>
</p>
</div>
<!--END FOOTER-->
</div>
<!--END FOOTERWRAP-->
</body>
</html>
这是为jquery轮播添加的CSS：
/******************************************************\
*
* Base TouchCarousel stylesheet
*
* Contents:
*
* 1. Main containers
* 2. Carousel items
* 3. Arrows(direction) navigation
* 4. Paging navigation
* 5. Scrollbar
* 6. Cursors
*
\******************************************************/
/******************************************************\
*
* 1. Main containers (carousel size, background)
*
\******************************************************/
.touchcarousel {
position: relative;
display: block;
width: 100%;
height: 200px;
float: right;
left: 0px;
margin-bottom: 10px;
/* style is removed after carousel is inited, use !important if you want to keep it*/
overflow: hidden;
}
.touchcarousel .touchcarousel-container {
position: relative;
padding: 0;
list-style: none;
margin-top: 5px;
display: inline-block;
float: left;
text-align: center;
padding-top: 5px;
padding-right: 0;
}
.touchcarousel .touchcarousel-wrapper {
position: relative;
overflow:hidden;
width: 100%;
height: 100%;
}
/******************************************************\
*
* 2. Carousel items (item styling, spacing between items)
*
\******************************************************/
.touchcarousel .touchcarousel-item {
/* use margin-right for spacing between items */
margin: 0 1 0 0;
padding: 0;
float: left;
}
.touchcarousel .touchcarousel-previous {
float: left;
}
.touchcarousel .touchcarousel-next {
position: relative;
float: right;
}
/* Last carousel item */
.touchcarousel .touchcarousel-item.last {
margin-right: 0 !important;
}
/******************************************************\
*
* 3. Arrows(direction) navigation
*
\******************************************************/
/* arrow hitstate and icon holder */
.touchcarousel .arrow-holder {
height: 100%;
width: 45px;
position: absolute;
top: 0;
display: block;
cursor: pointer;
z-index: 25;
}
.touchcarousel .arrow-holder.left {
left: 0;
}
.touchcarousel .arrow-holder.right {
right: 0;
}
/* arrow icons */
.touchcarousel .arrow-icon{
width: 45px;
height: 90px;
top:50%;
margin-top:-45px;
position: absolute;
cursor: pointer;
}
.touchcarousel .arrow-icon.left { }
.touchcarousel .arrow-icon.right { }
.touchcarousel .arrow-holder:hover .arrow-icon { }
.touchcarousel .arrow-holder.disabled { cursor: default; }
.touchcarousel .arrow-holder.disabled .arrow-icon { cursor: default; }
/******************************************************\
*
* 4. Paging navigation
*
\******************************************************/
.touchcarousel .tc-paging-container {
width:100%;
overflow:hidden;
position:absolute;
margin-top:-20px;
z-index:25;
}
.touchcarousel .tc-paging-centerer {
float: left;
position: relative;
left: 50%;
}
.touchcarousel .tc-paging-centerer-inside {
float: left;
position: relative;
left: -50%;
}
/* Paging items */
.touchcarousel .tc-paging-item {
float:left;
cursor:pointer;
position:relative;
display:block;
text-indent: -9999px;
}
.touchcarousel .tc-paging-item.current { }
.touchcarousel .tc-paging-item:hover { }
/******************************************************\
*
* 5. Scrollbar
*
\******************************************************/
.touchcarousel .scrollbar-holder {
position: absolute;
z-index: 30;
left: 6px;
right: 6px;
bottom: 5px;
height:4px;
overflow: hidden;
}
.touchcarousel .scrollbar {
position: absolute;
left:0;
height:4px;
bottom: 0px;
}
.touchcarousel .scrollbar.dark {
background-color: rgb(130, 130, 130);
background-color: rgba(0, 0, 0, 0.5);
}
.touchcarousel .scrollbar.light {
background-color: rgb(210, 210, 210);
background-color: rgba(255, 255, 255, 0.5);
}
/******************************************************\
*
* 6. Cursors
*
\******************************************************/
/* IE and Opera use "move", FF uses -moz-grab */
.touchcarousel .grab-cursor{ cursor:url(grab.png) 8 8, move; }
.touchcarousel .grabbing-cursor{ cursor:url(grabbing.png) 8 8, move; }
/* Cursor that used when mouse drag is disabled */
.touchcarousel .auto-cursor{ cursor:auto; }
/* Copyright 2011, Dmitry Semenov, http://dimsemenov.com */
答案 0 :(得分：1)
首先：
测试jQuery的链接。您正在使用Goole的CDN，因此您可以将该链接直接弹出到浏览器中。 BTW它工作正常。
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
<强>第二
Firebug，只需打开控制台并输入'$().jquery'不带引号...如果加载了jQuery，它将吐出一个版本号，否则会吐出错误。
<强>第三
检查您的ID＆amp; HTML，CSS＆amp;中的类JS。可以肯定的是，你的旋转木马容器上有一些破碎的CSS，这可能搞砸了。我从你的标记中取出了下面的CSS，你可以看到'#container carousel'应该是'#container #carousel'。如果没有这个，我认为什么都不会动。
#container carousel {
position: relative;
width: 100%;
margin: 0 auto;
}
答案 1 :(得分：0)
要检查路径是否正常，请使用查看页面的源代码（ctrl-u）右键单击jquery的src并查看代码是否存在。我也使用chrome开发人员工具......它会告诉你javascript中是否有一些错误，它是一个很棒的调试工具。要检查jQuery是否正常，只需执行$ .browser，如果它响应它就可以使用jQuery import ...