所以我使用了我喜欢的非常漂亮的 unslider，但由于某种原因，它只是拒绝在我的网站上工作。我是一名学习基本 html 的学生，所以如果错误真的很小而且很愚蠢，请原谅我。
我使用最新的 Jquery 以及 Unslider 提供的 Javascript。
我的代码：
* {
margin: 0px;
padding: 0px;
}
body{
background: url(../images/subtle_white_mini_waves.png) repeat;
}
#wrapper{
width:1180px;
margin: 0 auto;
}
.button{
background:url(../images/navbarbutton.png);
width:175px;
margin-top:66px;
}
.button a{
padding:35px 20px;
}
.navside{
width:170px;
height:89px;
margin-top:66px;
}
.nav ul {
*zoom:1;
list-style:none;
margin:0;
padding:0;
}
.nav ul:before,.nav ul:after {
content:"";
display:table;
}
.nav ul:after {
clear:both;
}
.nav ul > li {
float:left;
position:relative;
}
.nav ul li a {
font-family:Tahoma, Geneva, sans-serif;
font-size:16px;
display:block;
line-height:1.2em;
color:#fff;
text-align:center;
text-decoration:none;
}
.nav ul li ul li a{
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
display:block;
line-height:1.2em;
color:#fff;
text-align:center;
text-decoration:none;
}
.button a:hover {
text-decoration:none;
background:#033782;
height:20px;
}
.nav ul li.button{
width:175px;
height: 89px;
}
.nav ul li.sub1{
width:175px;
height: 50px;
}
.nav ul li.sub2{
width:175px;
height: 70px;
}
.nav ul li.sub1 a{
padding: 15px 20px;
}
.nav ul li.sub1 a:hover{
color:#666;
}
.nav ul li.sub2 a{
padding: 15px 20px;
}
.nav ul li.sub2 a:hover{
color:#666;
}
.nav li ul {
background:#7bb0e2;
position:absolute;
left:0;
top:89px;
z-index:1;
}
.nav ul > li:hover ul {
left:0;
}
.nav li ul li {
overflow:hidden;
max-height:0;
-webkit-transition:max-height 1000ms ease;
-moz-transition:max-height 1000ms ease;
-o-transition:max-height 1000ms ease;
-ms-transition: max-heightheight 1000ms ease;
transition:max-height 1000ms ease;
}
.nav li ul a {
border:none;
}
.nav li ul a:hover {
background:rgba(0,0,0,0);
}
.nav ul > li:hover ul li {
max-height:150px;
}
.banner {
position: relative;
overflow: auto;
width:100%;
top:-74px;
padding: 0px;
margin: 0px;
z-index:-10;
}
.banner ul{
margin:0px;
padding:0px;
}
.bammer li{
list-style:none;
padding:0px;
margin:0px;
}
.banner ul li {
float: left;
display:block;
min-height:370px;
margin:0px;
padding:0px;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
-ms-background-size: 100% auto;
background-size: 100% auto;
background-position-y:-75px;
}<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beyond - Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="scripts/unslider.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$('.banner').unslider();
});
</script>
</head>
<body>
<div id="wrapper">
<nav class="nav">
<ul>
<li>
<div class="navside">
<img src="images/navbarleft.png" width="170" height="89">
</div>
</li>
<li class="button">
<a href="#">Programes</a>
<ul>
<li class="sub2"><a href="#">Problem<br>De-escalation</a></li>
<li class="sub2"><a href="#">Family Strenghthening</a></li>
<li class="sub2"><a href="#">Community Integration</a></li>
<li class="sub2"><a href="#">Support Programmes</a></li>
</ul>
</li>
<li class="button">
<a href="#">How you can help</a>
<ul>
<li class="sub1"><a href="#">Donate</a></li>
<li class="sub1"><a href="#">Volunteer</a></li>
<li class="sub1"><a href="#">Sponsor</a></li>
<li class="sub1"><a href="#">Partner</a></li>
<li class="sub1"><a href="#">Join the Staff</a></li>
</ul>
</li>
<li>
<div id="logo">
<a href="index.html"><img src="images/logo.png" width="140" height="225" alt="Beyond - Logo"></a>
</div>
</li>
<li class="button">
<a href="#">About Us</a>
<ul>
<li class="sub1"><a href="#">Our Board</a></li>
<li class="sub1"><a href="#">News and Views</a></li>
</ul>
</li>
<li class="button">
<a href="#">Contact Us</a>
<ul>
<li class="sub1"><a href="#">Facilities</a></li>
<li class="sub1"><a href="#">Feedback</a></li>
</ul>
</li>
<li>
<div class="navside">
<img src="images/navbarright.png" width="170" height="89">
</div>
</li>
</ul>
</nav>
<div id="slider">
<div class="banner">
<ul>
<li style="background-image:url('http://lokacion.com/electra/wp-content/uploads/sites/52/2014/01/electra_slider-1-1180x370.jpg');"></li>
<li style="background-image: url('http://lokacion.com/electra/wp-content/uploads/sites/52/2014/01/electra_slider-1-1180x370.jpg');"></li>
<li style="background-image: url('http://lokacion.com/electra/wp-content/uploads/sites/52/2014/01/electra_slider-1-1180x370.jpg');"></li>
</ul>
</div>
</div>
<div id="content">
<div id="video">
</div>
<div id="userobj">
</div>
</div>
</div>
</body>
</html>