所以我创建了一个网站，我决定使用Amazing Slider。但是，当我将HTML放在我的HTML页面上时，它似乎不起作用。我不确定为什么。我会在页面上粘贴我的所有代码。我不确定是不是因为它是否有不透明的小内容盒，但是如果可能的话，我只是喜欢在内容框中工作......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Think Jewelry</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<!-- Insert to your webpage before the </head> -->
<script src="sliderengine/jquery.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-1.css">
<script src="sliderengine/initslider-1.js"></script>
<!-- End of head section HTML codes -->
<style>
#horizon
{
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display: block;
}
#stuff
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #fff;
opacity: 0.6;
margin-left: -500px;
position: absolute;
top: -125px;
left: 50%;
width: 1000px;
height: 450px;
visibility: visible;
overflow: scroll;
padding: 10px;
border: 5px dotted #F3DECD;
text-align: center;
}
footer {
height:45px;
width:100%;
background-color:#EAC5E4;
position:absolute;
bottom:0;
font-style: italic;
}
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
background:#fff url(images/bg1.png) repeat;
background-size: 700px;
height: 100%;
min-height: 100%;
}
.title{
width:548px;
height:119px;
position:absolute;
background:transparent url(title.png) no-repeat top left;
}
#content{
margin:0 auto;
}
</style>
</head>
<body>
<div id="content">
<a href="index.html"><div class="title"> </div></a>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Home</h2>
<ul>
<li><a href="aboutshop.html">About the Shop</a></li>
<li><a href="aboutartist.html">About the Artist</a></li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>How-To's</h2>
<ul>
<li><a href="howtojewelry.html">Jewelry</a></li>
<li><a href="howtoclay.html">Clay</a></li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Portfolio</h2>
<ul>
<li><a href="jewelry.html">Jewelry</a></li>
<li><a href="clay.html">Clay</a></li>
<li><a href="digital.html">Digital</a></li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Contact</h2>
<ul>
<li><a href="contact.html">Questions</a></li>
<li><a href="suggestions.html">Suggestions</a></li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#nav > div').hover(
function () {
var $this = $(this);
$this.find('img').stop().animate({
'width' :'199px',
'height' :'199px',
'top' :'-25px',
'left' :'-25px',
'opacity' :'1.0'
},500,'easeOutBack',function(){
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width' :'52px',
'height' :'52px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.1'
},5000,'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
</script>
<div id="horizon">
<div id="stuff">
<h2> Jewelry Gallery </h2><br>
<p>
<!-- Insert to your webpage where you want to display the slider -->
<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:500px;padding-left:0px; padding-right:83px;margin:0px auto 0px;">
<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
<ul class="amazingslider-slides" style="display:none;">
<li><img src="images/bracelet1.jpg" alt="bracelet1" />
</li>
<li><img src="images/bracelet2.jpg" alt="bracelet2" />
</li>
<li><img src="images/bracelet3.jpg" alt="bracelet3" />
</li>
<li><img src="images/bracelet4.jpg" alt="bracelet4" />
</li>
<li><img src="images/bracelet5.jpg" alt="bracelet5" />
</li>
<li><img src="images/bracelet6.jpg" alt="bracelet6" />
</li>
<li><img src="images/bracelet7.jpg" alt="bracelet7" />
</li>
<li><img src="images/bracelet8.jpg" alt="bracelet8" />
</li>
<li><img src="images/bracelet9.jpg" alt="bracelet9" />
</li>
<li><img src="images/bracelet10.jpg" alt="bracelet10" />
</li>
<li><img src="images/bracelet11.jpg" alt="bracelet11" />
</li>
<li><img src="images/bracelet12.jpg" alt="bracelet12" />
</li>
<li><img src="images/bracelet13.jpg" alt="bracelet13" />
</li>
<li><img src="images/bracelet14.jpg" alt="bracelet14" />
</li>
<li><img src="images/bracelet15.jpg" alt="bracelet15" />
</li>
<li><img src="images/bracelet16.jpg" alt="bracelet16" />
</li>
<li><img src="images/bracelet17.jpg" alt="bracelet17" />
</li>
<li><img src="images/bracelet18.jpg" alt="bracelet18" />
</li>
<li><img src="images/bracelet19.jpg" alt="bracelet19" />
</li>
<li><img src="images/bracelet20.jpg" alt="bracelet20" />
</li>
<li><img src="images/bracelet21.jpg" alt="bracelet21" />
</li>
<li><img src="images/bracelet22.jpg" alt="bracelet22" />
</li>
<li><img src="images/bracelet23.jpg" alt="bracelet23" />
</li>
<li><img src="images/bracelet24.jpg" alt="bracelet24" />
</li>
<li><img src="images/bracelet25.jpg" alt="bracelet25" />
</li>
<li><img src="images/showcase.jpg" alt="showcase" data-description="A display of earrings and bracelets in the Revive Your Style showcase." />
</li>
</ul>
<ul class="amazingslider-thumbnails" style="display:none;">
<li><img src="images/bracelet1-tn.jpg" alt="bracelet1" /></li>
<li><img src="images/bracelet2-tn.jpg" alt="bracelet2" /></li>
<li><img src="images/bracelet3-tn.jpg" alt="bracelet3" /></li>
<li><img src="images/bracelet4-tn.jpg" alt="bracelet4" /></li>
<li><img src="images/bracelet5-tn.jpg" alt="bracelet5" /></li>
<li><img src="images/bracelet6-tn.jpg" alt="bracelet6" /></li>
<li><img src="images/bracelet7-tn.jpg" alt="bracelet7" /></li>
<li><img src="images/bracelet8-tn.jpg" alt="bracelet8" /></li>
<li><img src="images/bracelet9-tn.jpg" alt="bracelet9" /></li>
<li><img src="images/bracelet10-tn.jpg" alt="bracelet10" /></li>
<li><img src="images/bracelet11-tn.jpg" alt="bracelet11" /></li>
<li><img src="images/bracelet12-tn.jpg" alt="bracelet12" /></li>
<li><img src="images/bracelet13-tn.jpg" alt="bracelet13" /></li>
<li><img src="images/bracelet14-tn.jpg" alt="bracelet14" /></li>
<li><img src="images/bracelet15-tn.jpg" alt="bracelet15" /></li>
<li><img src="images/bracelet16-tn.jpg" alt="bracelet16" /></li>
<li><img src="images/bracelet17-tn.jpg" alt="bracelet17" /></li>
<li><img src="images/bracelet18-tn.jpg" alt="bracelet18" /></li>
<li><img src="images/bracelet19-tn.jpg" alt="bracelet19" /></li>
<li><img src="images/bracelet20-tn.jpg" alt="bracelet20" /></li>
<li><img src="images/bracelet21-tn.jpg" alt="bracelet21" /></li>
<li><img src="images/bracelet22-tn.jpg" alt="bracelet22" /></li>
<li><img src="images/bracelet23-tn.jpg" alt="bracelet23" /></li>
<li><img src="images/bracelet24-tn.jpg" alt="bracelet24" /></li>
<li><img src="images/bracelet25-tn.jpg" alt="bracelet25" /></li>
<li><img src="images/showcase-tn.jpg" alt="showcase" /></li>
</ul>
<div class="amazingslider-engine"><a href="http://amazingslider.com" title="Responsive jQuery Content Slider">Responsive jQuery Content Slider</a></div>
</div>
</div>
<!-- End of body section HTML codes -->
</p>
</div>
</div>
<footer>
<a href="">
<img height="32" width="32" alt=" Deviantart" src="deviantart.png">
</a>
<a href="">
<img height="32" width="32" alt="Think Jewelry Page" src="facebook.png">
</a>
Copyright©
</footer>
</body>
</html>
答案 0 :(得分：0)
<!-- Insert to your webpage before the </head> -->
<script src="sliderengine/jquery.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-0.css">
<script src="sliderengine/initslider-0.js"></script>
<!-- End of head section HTML codes -->