我有一个包含 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 */