1
그래서 놀라운 슬라이더를 사용하기로 결정한 웹 사이트를 만들었습니다. 그러나 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"/>
\t \t <!-- 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
\t \t \t \t \t {
\t \t \t \t text-align: center;
\t \t \t \t position: absolute;
\t \t \t \t top: 50%;
\t \t \t \t left: 0px;
\t \t \t \t width: 100%;
\t \t \t \t overflow: visible;
\t \t \t \t visibility: visible;
\t \t \t \t display: block;
\t \t \t \t
\t \t \t }
\t \t \t #stuff
\t \t \t \t {
\t \t \t font-family: Verdana, Geneva, Arial, sans-serif;
\t \t \t background-color: #fff;
\t \t \t opacity: 0.6;
\t \t \t margin-left: -500px;
\t \t \t position: absolute;
\t \t \t top: -125px;
\t \t \t left: 50%;
\t \t \t width: 1000px;
\t \t \t height: 450px;
\t \t \t visibility: visible;
\t \t \t overflow: scroll;
\t \t \t padding: 10px;
\t \t \t border: 5px dotted #F3DECD;
\t \t \t text-align: center;
\t \t \t }
\t \t \t
\t \t \t footer {
\t \t \t height:45px;
\t \t \t width:100%;
\t \t \t background-color:#EAC5E4;
\t \t \t position:absolute;
\t \t \t bottom:0;
\t \t \t font-style: italic;
\t \t \t }
\t \t \t
\t \t \t *{
margin:0;
padding:0;
}
body{
font-family:Arial;
\t \t \t \t background:#fff url(images/bg1.png) repeat;
\t \t \t \t background-size: 700px;
\t \t \t \t height: 100%;
\t \t \t \t min-height: 100%;
}
.title{
width:548px;
height:119px;
position:absolute;
background:transparent url(title.png) no-repeat top left;
}
#content{
margin:0 auto;
}
\t \t \t
</style>
</head>
<body>
\t
<div id="content">
\t \t <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>
\t \t \t \t \t \t <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>
\t \t \t \t \t \t <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>
\t \t
\t \t
\t \t
\t \t
<div id="horizon">
\t <div id="stuff">
\t <h2> Jewelry Gallery </h2><br>
\t <p>
\t <!-- 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 -->
\t </p>
\t
\t </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>
'head 태그 다음에 추가해야합니다. 아래에 이것을 추가하십시오. amazingslider div – Gazi