过去几天我一直在努力修复这个Jquery滑块，我不知道最近发生了什么。当我设置它时，直播＆＃39;在HTML Dreamweaver中，它的工作原理。一个问题是，它不会居中到屏幕中间，图像从上到下而不是从左到右滑动。它还显示了滑块下面的下一个即将出现的图像，然后放在一边（就像＆＃39;故障＆＃39;）我不明白为什么会这样做。当它预览到谷歌浏览器时，滑块没有出现，它只是想出了假设在滑块中的照片的静止图像。有人可以帮帮我吗？我该如何解决这个问题:(它真的让我很紧张。
<!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>Untitled Document</title>
<link rel="stylesheet" href="blueberry.css" />
<style type="text/css">
*{
margin: 0;
border: 0;
padding: 0;
}
body {
background: #F0F0F0;
font: 14px/20px Arial, San-Serif;
color: #555;
margin: 0;
}
h1 {
text-align: center;
font-size: 180%;
line-height: 120%;
padding: 5% 0:
}
h2 {
text-decoration: underline;
line-height: 280%;
padding-left: 2%;
}
h3 {
line-height: 110%;
padding: 5% 0;
}
p {
padding: 1%;
}
a {
color: #FFF;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #FFF;
text-decoration: underline;
}
header {
background: #405580;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90;
}
#logo {
maergin: 20px;
float: left;
width: 600px;
height: 79px;
background: url(http://images.cooltext.com/4390568.png) no-repeat center;
}
nav {
float: right;
padding: 35px 20px 20px 0;
}
#menu-icon {
display:hidden;
width: 40px;
height: 40px;
background: url(http://www.w3newbie.com/wp-content/uploads/icon.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style: none
}
nav ul li {
display: inline-block;
floating: left;
padding: 10px;
}
.current {
color: #FFF;
text-decoration: underline;
}
#doc {
margin: 40px 0;
}
#content {
margin: 0 auto;
max-width: 1140;
margin-top: 110px;
}
.blueberry {
max-width: 960px;
margin-top: 110px;
}
section {
width: 29%;
float: left;
margin: 2% 2%;
text-align: center;
}
.clear {
clear: both;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
padding: 4%;
}
aside {
float: right;
margin: 0 auto;
width: 35%;
height: auto;
padding: 3%;
}
ul. gym li {
padding-left: 3%
}
footer {
background: #333333;
width: 100%;
overflow: hidden;
opacity: 0.90%;
}
footer p, footer h3 {
color: #FFF;
}
footer p a {
color: #FFF;
text-decoration: none;
}
ul.social li {
display: inline;
}
ul.social li img {
height: 50px;
}
footer.second {
border-top: 1px solid #4D4E50;
background-color: #333333;
max-height: 50px;
text-align: center;
opacity: 0.95;
}
/*------------------MEDIA!!----------*/
@media screen and (max-width: 478px) {
body {
position: absolute;
}
}
@media screen and (max-width: 740px) {
header {
position: absolute
}
#menu-icon {
display: inline-block
}nav ul, nav: active ul {
display: none;
position: absolute;
padding: 20px;
background: #405580;
border: 1px solid #FFF;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px 0 2px 2px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
section {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
article {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
aside {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src= "jquery.blueberry.js"></script>
<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>
</head>
<body>
<header>
<a href="#" id="logo"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="#" class= "current">Home</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Orders</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav><br />
</header>
<div id="doc">
<div id="content">
<div class="blueberry">
<ul class="slides" >
<li><img src="http://skelbiu-img.dgn.lt/1_5_206818520/surenkame-knygas.jpg" alt="BookOpening" width="960" height="476" /> </li>
<li><img src="http://www.abc.net.au/news/image/5668412-3x2-940x627.jpg " alt="BookSection" width="960" height="476" /> </li>
<li><img src="http://s3-ec.buzzfed.com/static/2014-10/22/15/enhanced/webdr10/edit-wide-942-1414005865-6.jpg" alt="BookLane" width="960" height="476" /> </li>
<li><img src="http://pfauth.com/wp-content/uploads/2012/05/03_Shakespeare_and_Company-975x327.jpg" alt="BookRange" width="960" height="476" /> </li>
</ul>
</div>
</div>
</div>
<section>
<img src="http://www.sunlitemitre10.com.au/site/assets/media/tick.png" alt="Tick" width="70" height="70" />
<h1> WELCOME! </h1>
<p> Hello! Welcome to our website. If you are a local... see you in real time and space on your next visit ... for cheap secondhand books. If you're from somewhere else, come talk to us on the World Wide Web, and if you're visiting Geelong anytime soon, we hope you'll come by.</p>
</section>
<section>
<img src="http://cliparts.co/cliparts/Bcg/Krr/BcgKrr9zi.png" alt="Tick" width="70" height="70" />
<h1> GOOD NEWS </h1>
<p> All books are going to be 5% off in July and December, 2015! We'll be selling a range of secondhand books, and selected new ones.</p>
</section>
<section>
<img src="http://www.sunlitemitre10.com.au/site/assets/media/tick.png" alt="Tick" width="70" height="70" />
<h1> HISTORY </h1>
<p> In August 2001, Mary and John have opened this used book shop located in: 123 Moorabool Street, in Geelong.
Since 2015, we have started opening at 9 a.m.! We must be the only book shop in Geelong that open up at this hour, and it's been said to be the best Secondhand Bookshop in Geelong.</p>
</section>
<div class="clear"></div>
<section>
<h1> Do you have books to sell? </h1>
<img src= "http://mycollegeguide.org/blog/wp-content/uploads/2012/09/selling_books_2.jpg" alt="sell" width="400" height="350" />
<p> We are always on the look out for secondhand books. Do try us if you have any that you no longer require, we may well be interested, for cash or exchange. PLEASE PHONE FIRST, to arrange a convenient time. </p>
</section>
<section>
<h2> IMPORTANT NOTICE! </h2>
<img src="http://storage.googleapis.com/wzukusers/user-14023369/images/559eb2ee1fbecjiSir57/Fanned-Book1cropped_400.jpg" alt="imp" width="400" height="353" />
<p> From Monday October 5th to Friday October 10th, we will be closing early, for stocktake. The shop will be open until 1pm. Saturday, on the 11th we will return to normal trading hours. Apologies for any inconvenience.</p>
</section>
<section>
<h1> Take a read </h1>
<img src="https://writesandwrongsblog.files.wordpress.com/2014/07/elylanguages_1892125c.jpg" alt="sit" width="460" height="288" />
<p> Come and stop by the reading area and see if we've got the book that you're looking for in stock. We also got stock cards, wrapping paper and various journals and more. </p>
</section>
<footer>
<section>
<h3><b> Best Second-hand Bookshop in Geelong </b></h3>
<p> <b> - Mary & John </b><br><br>
</p>
</section>
<section>
<h3> Connect with Us! </h3>
<ul class="social" >
<li> <a href="#"><img src= "http://lifeallieslab.com/images/fb-icon.png" alt="fb" height="59" width="55"/></a></li>
<li> <a href="#"><img src= "http://pictures.dealer.com/d/dickdyervolvovcna/0008/0304ac7e766dd3685950e8f2fba330a0x.jpg" alt="g" height="36" width="36"/></a></li>
<li> <a href="#"><img src= "https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-512.png" alt="twitter" height="40" width="40"/></a></li>
<li> <a href="#"><img src= "http://icons.iconarchive.com/icons/martz90/circle/256/pinterest-icon.png" alt="pintrest" height="40" width="40"/></a></li>
</ul>
</section>
<section>
<img src="http://www.iconsdb.com/icons/preview/white/book-xxl.png" alt="icon" width="128" height="128"/>
</section>
</footer>
<footer class= "second">
<p> @University, School of Information Technology. This web page has been developed as a student assignment for this uni, Introduction to Web Development. Therefore it is not part of the University's authorised web site. DO NOT USE THE INFORMATION CONTAINED ON THIS WEB PAGE IN ANY WAY."</p>
</footer>
</body>
</html>
答案 0 :(得分：0)
以下是工作代码：
<!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>Untitled Document</title>
<style type="text/css">
.blueberry { margin: 0 auto; overflow: hidden; }
.blueberry .slides {
display: block;
position: relative;
overflow: hidden;
}
.blueberry .slides li {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.blueberry .slides li img {
display: block;
width: 100%;
max-width: none;
}
.blueberry .slides li.active { display: block; position: relative; }
.blueberry .crop li img { width: auto; }
.blueberry .pager {
height: 40px;
text-align: center;
}
.blueberry .pager li { display: inline-block; }
.blueberry .pager li a,
.blueberry .pager li a span {
display: block;
height: 4px;
width: 4px;
}
.blueberry .pager li a {
padding: 18px 8px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-ms-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}
.blueberry .pager li a span {
overflow: hidden;
background: #c0c0c0;
text-indent: -9999px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
}
.blueberry .pager li.active a span { background: #404040; }
*{
margin: 0;
border: 0;
padding: 0;
}
body {
background: #F0F0F0;
font: 14px/20px Arial, San-Serif;
color: #555;
margin: 0;
}
h1 {
text-align: center;
font-size: 180%;
line-height: 120%;
padding: 5% 0:
}
h2 {
text-decoration: underline;
line-height: 280%;
padding-left: 2%;
}
h3 {
line-height: 110%;
padding: 5% 0;
}
p {
padding: 1%;
}
a {
color: #FFF;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #FFF;
text-decoration: underline;
}
header {
background: #405580;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90;
}
#logo {
maergin: 20px;
float: left;
width: 600px;
height: 79px;
background: url(http://images.cooltext.com/4390568.png) no-repeat center;
}
nav {
float: right;
padding: 35px 20px 20px 0;
}
#menu-icon {
display:hidden;
width: 40px;
height: 40px;
background: url(http://www.w3newbie.com/wp-content/uploads/icon.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style: none
}
nav ul li {
display: inline-block;
floating: left;
padding: 10px;
}
.current {
color: #FFF;
text-decoration: underline;
}
#doc {
margin: 40px 0;
}
#content {
margin: 0 auto;
max-width: 1140;
margin-top: 110px;
}
.blueberry {
max-width: 960px;
margin-top: 110px;
}
section {
width: 29%;
float: left;
margin: 2% 1%;
text-align: center;
}
.clear {
clear: both;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
padding: 4%;
}
aside {
float: right;
margin: 0 auto;
width: 35%;
height: auto;
padding: 3%;
}
ul. gym li {
padding-left: 3%
}
footer {
background: #333333;
width: 100%;
overflow: hidden;
opacity: 0.90%;
}
footer p, footer h3 {
color: #FFF;
}
footer p a {
color: #FFF;
text-decoration: none;
}
ul.social li {
display: inline;
}
ul.social li img {
height: 50px;
}
footer.second {
border-top: 1px solid #4D4E50;
background-color: #333333;
max-height: 50px;
text-align: center;
opacity: 0.95;
}
/*------------------MEDIA!!----------*/
@media screen and (max-width: 478px) {
body {
position: absolute;
}
}
@media screen and (max-width: 740px) {
header {
position: absolute
}
#menu-icon {
display: inline-block
}nav ul, nav: active ul {
display: none;
position: absolute;
padding: 20px;
background: #405580;
border: 1px solid #FFF;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px 0 2px 2px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
section {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
article {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
aside {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src= "https://raw.githubusercontent.com/marktuk/Blueberry/master/jquery.blueberry.js"></script>
<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>
</head>
<body>
<header>
<a href="#" id="logo"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="#" class= "current">Home</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Orders</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav><br />
</header>
<div id="doc">
<div id="content">
<div class="blueberry">
<ul class="slides" >
<li><img src="http://skelbiu-img.dgn.lt/1_5_206818520/surenkame-knygas.jpg" alt="BookOpening" width="960" height="476" /> </li>
<li><img src="http://www.abc.net.au/news/image/5668412-3x2-940x627.jpg " alt="BookSection" width="960" height="476" /> </li>
<li><img src="http://s3-ec.buzzfed.com/static/2014-10/22/15/enhanced/webdr10/edit-wide-942-1414005865-6.jpg" alt="BookLane" width="960" height="476" /> </li>
<li><img src="http://pfauth.com/wp-content/uploads/2012/05/03_Shakespeare_and_Company-975x327.jpg" alt="BookRange" width="960" height="476" /> </li>
</ul>
</div>
</div>
</div>
<section>
<img src="http://www.sunlitemitre10.com.au/site/assets/media/tick.png" alt="Tick" width="70" height="70" />
<h1> WELCOME! </h1>
<p> Hello! Welcome to our website. If you are a local... see you in real time and space on your next visit ... for cheap secondhand books. If you're from somewhere else, come talk to us on the World Wide Web, and if you're visiting Geelong anytime soon, we hope you'll come by.</p>
</section>
<section>
<img src="http://cliparts.co/cliparts/Bcg/Krr/BcgKrr9zi.png" alt="Tick" width="70" height="70" />
<h1> GOOD NEWS </h1>
<p> All books are going to be 5% off in July and December, 2015! We'll be selling a range of secondhand books, and selected new ones.</p>
</section>
<section>
<img src="http://www.sunlitemitre10.com.au/site/assets/media/tick.png" alt="Tick" width="70" height="70" />
<h1> HISTORY </h1>
<p> In August 2001, Mary and John have opened this used book shop located in: 123 Moorabool Street, in Geelong.
Since 2015, we have started opening at 9 a.m.! We must be the only book shop in Geelong that open up at this hour, and it's been said to be the best Secondhand Bookshop in Geelong.</p>
</section>
<div class="clear"></div>
<section>
<h1> Do you have books to sell? </h1>
<img src= "http://mycollegeguide.org/blog/wp-content/uploads/2012/09/selling_books_2.jpg" alt="sell" width="400" height="350" />
<p> We are always on the look out for secondhand books. Do try us if you have any that you no longer require, we may well be interested, for cash or exchange. PLEASE PHONE FIRST, to arrange a convenient time. </p>
</section>
<section>
<h2> IMPORTANT NOTICE! </h2>
<img src="http://storage.googleapis.com/wzukusers/user-14023369/images/559eb2ee1fbecjiSir57/Fanned-Book1cropped_400.jpg" alt="imp" width="400" height="353" />
<p> From Monday October 5th to Friday October 10th, we will be closing early, for stocktake. The shop will be open until 1pm. Saturday, on the 11th we will return to normal trading hours. Apologies for any inconvenience.</p>
</section>
<section>
<h1> Take a read </h1>
<img src="https://writesandwrongsblog.files.wordpress.com/2014/07/elylanguages_1892125c.jpg" alt="sit" width="460" height="288" />
<p> Come and stop by the reading area and see if we've got the book that you're looking for in stock. We also got stock cards, wrapping paper and various journals and more. </p>
</section>
<footer>
<section>
<h3><b> Best Second-hand Bookshop in Geelong </b></h3>
<p> <b> - Mary & John </b><br><br>
</p>
</section>
<section>
<h3> Connect with Us! </h3>
<ul class="social" >
<li> <a href="#"><img src= "http://lifeallieslab.com/images/fb-icon.png" alt="fb" height="59" width="55"/></a></li>
<li> <a href="#"><img src= "http://pictures.dealer.com/d/dickdyervolvovcna/0008/0304ac7e766dd3685950e8f2fba330a0x.jpg" alt="g" height="36" width="36"/></a></li>
<li> <a href="#"><img src= "https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-512.png" alt="twitter" height="40" width="40"/></a></li>
<li> <a href="#"><img src= "http://icons.iconarchive.com/icons/martz90/circle/256/pinterest-icon.png" alt="pintrest" height="40" width="40"/></a></li>
</ul>
</section>
<section>
<img src="http://www.iconsdb.com/icons/preview/white/book-xxl.png" alt="icon" width="128" height="128"/>
</section>
</footer>
<footer class= "second">
<p> @University, School of Information Technology. This web page has been developed as a student assignment for this uni, Introduction to Web Development. Therefore it is not part of the University's authorised web site. DO NOT USE THE INFORMATION CONTAINED ON THIS WEB PAGE IN ANY WAY."</p>
</footer>
</body>
答案 1 :(得分：0)
'Download'