1
我仍在學習Javascipt的基礎知識，但我似乎在使用anythingslider時遇到了一些麻煩。無論我重新編寫這段代碼多少次，我都無法找到錯誤，並且滑塊未加載。它只是簡單地將圖像疊加在頁面上，並帶有中間的標題。Anything Slider未加載
任何人都可以找到並解釋錯誤給我，所以我可以在將來避免它？
我的主頁最終看起來像這樣： Picture of the main page
演示鏈接：https://css-tricks.github.io/AnythingSlider/simple.html#&panel1-1
HTML
<!doctype html>
<html>
<head>
<title>
| Template |
</title><!-- reference point -->
<meta charset="utf-8">
<link href="css/anythingslider.css" rel="stylesheet">
<link href="css/theme-metallic.css" rel="stylesheet">
<!-- the link below is to your current stylesheet - no need to duplicate! -->
<link rel="stylesheet" href="slider.css" media="screen">
<!-- you may already have this or a similar library linked below -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.anythingslider.min.js"></script><!-- this is the main slider plugin -->
<script type="text/javascript">
$(document).ready(function() {
$("nav").accessibleDropDown();
$('#slider3').anythingSlider({
theme :'metallic',
expand :false,
resizeContents :true,
aspectRatio :true,
showMultiple :1,
changeBy :1,
startPanel :1,
autoPlay :true
})
.find('.panel')
.find('div[class*=caption]').css(
{
position:'absolute'
})
.end()
.hover(function() {
showCaptions($(this));
},
function() {
hideCaptions($(this));
}); // end slider
showCaptions = function(el){
var $this = el;
if ($this.find('.caption-bottom').length) {
$this.find('.caption-bottom')
.show()
.animate({ bottom: 0, opacity: 1 }, 400);
}
};
hideCaptions = function(el){
var $this = el;
if ($this.find('.caption-bottom').length) {
$this.find('.caption-bottom')
.stop()
.animate({ bottom: -50, opacity: 0 }, 350, function(){
$this.find('.caption-bottom').hide(); });
}
};
hideCaptions($('#slider3 .panel'));
}); // end ready
&.fn.accessibleDropDown = function() {
var el = $(this);
$("a", el).focus(function() {
$(this).parents("li").addClass("hover");
}).blur(function() {
$(this).parents("li").removeClass("hover");
});
}
</script>
<style>
nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active,
nav ul li.hover a {
background-color: #e1e2dd;
transition: background-color 1s ease-out; /* this line produces transistion */
color: #483838;}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1> The Guitar Shop </h1>
<nav>
<!-- MENU START UL -->
<ul>
<li> <a href="slider.html"> Home </a></li>
<li> <a href=""> About </a></li>
<!-- GUITARS MENU BUTTON, OPEN LI TAG -->
<li> <a href=""> Guitars </a>
<!-- GUITARS SUBMENU -->
<ul>
<li> <a href=""> Acoustic </a></li>
<li> <a href=""> Electric </a></li>
<li> <a href=""> Bass </a></li>
<li> <a href=""> Special </a></li>
</ul>
<!-- GUITARS MENU BUTTON CLOSE LI TAG -->
</li>
<!-- -->
<!-- SERVICES MENU BUTTON, OPEN LI TAG -->
<li> <a href=""> Services </a>
<!-- SERVICES SUBMENU -->
<ul>
<li> <a href=""> Re-String </a></li>
<li> <a href=""> Repairs </a></li>
<li> <a href=""> Lessons </a></li>
<li> <a href=""> Consignment </a></li>
</ul>
<!-- SERVICES MENU BUTTON CLOSE LI TAG -->
</li>
<!-- -->
<!-- INFORMATION MENU BUTTON, OPEN LI TAG -->
<li> <a href=""> Information </a>
<!-- INFORMATION SUBMENU -->
<ul>
<li> <a href=""> Sub-Topic 1 </a></li>
<li> <a href=""> Sub-Topic 2 </a></li>
<li> <a href=""> Sub-Topic 3 </a></li>
</ul>
<!-- INFORMATION MENU BUTTON CLOSE LI TAG -->
</li>
<!-- -->
<!-- CONTACT MENU BUTTON -->
<li> <a href=""> Contact </a> </li>
<!-- NO CONTACT SUBMENU -->
<!-- -->
<!-- MENU CLOSE UL -->
</ul>
<!-- END MENU -->
</nav>
</header>
<aside>
<p> The sidebar content </p>
<p> The sidebar content </p>
<p> The sidebar content </p>
<p> The sidebar content </p>
<p> The sidebar content </p>
<p> The sidebar content </p>
<p> The sidebar content </p>
</aside>
<section>
<article><!-- reference point - don't add another! -->
<ul id="slider3">
<li>
<!-- Note this caption is before the image, all others it is after -->
<div class="caption-top">
Nothing like a little LP Goldtop to get you going!
</div>
<a href="descPage1.html">
<img src="images/guitar01.jpg"> </a>
</li>
<li>
<a href="descPage2.html">
<img src="images/guitar02.jpg" alt=""></a>
<div class="caption-right">
Acoustic blues can be so much fun!
</div>
</li>
<li>
<a href="descPage3.html"><img src="images/guitar03.jpg" alt=""></a>
<div class="caption-bottom">
Ebony Fretboard and brass wound Elixir strings
</div>
</li>
<li>
<a href="descPage4.html">
<img src="images/guitar04.jpg" alt=""></a>
<div class="caption-left">
Step on up and play us a tune.
</div>
</li>
</ul>
</article><!-- reference point - don't add another! -->
<br>
<br>
<h6 class="spec"></h6>
<article class="cols">
<h2 class="cols-span"> Lorem ipsum dolor sit amet</h2>
<p class=" lead cols-span"> Maecenas tristique consequat sapien at convallis. Fusce commodo</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique consequat sapien at convallis. Fusce commodo ornare neque in egestas. Quisque id luctus eros. Morbi efficitur risus ultricies felis fermentum, ut dictum metus vulputate. Mauris est orci, dapibus sodales commodo a, luctus nec sapien. Ut a orci ut lacus tempor porttitor eget a arcu. Quisque aliquet volutpat mi facilisis malesuada. Phasellus vestibulum metus sit amet risus convallis, sit amet ornare nulla placerat. Ut pulvinar mi in tortor maximus aliquam. Mauris pulvinar congue nisl, et faucibus neque tempor sed. Morbi tristique rutrum ullamcorper.
Pellentesque lacinia accumsan bibendum. Mauris ac viverra quam, at varius nisi. Vivamus et ipsum non leo luctus interdum. Morbi diam elit, feugiat non tincidunt vitae, molestie eget mi. Vivamus posuere dolor eget orci viverra, suscipit scelerisque nulla porttitor. Aenean eu fringilla tellus, eget posuere velit. Etiam vel diam scelerisque, semper mi et, accumsan eros. Fusce faucibus scelerisque nunc non ultricies.</p>
</article>
</section>
<aside class="ads">
<p>Advertisement can run the size out to the margin of the previous container element, no more! </p>
<p> Advertisement</p>
<p> Advertisement</p>
<p> Advertisement</p>
<p> Advertisement</p>
<p> Advertisement</p>
</aside>
<footer>
<p> Copyright © 2015 All Rights Reserved </p>
</footer>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body, p, header, aside, section, article, h1, h2, h3, nav, div, footer {
padding:0;
margin:0;
}
p{
margin-bottom:1.2em;
}
header{
text-align: center;
background: #b49898 url(images/guitar03.jpg) 90% no-repeat;
height:200px;
}
header h1 {
color:#e1e2dd; /* New Color! */
font-weight:900;
font-size:2.5em;
margin:0 auto 1em auto; /* New lines start here */
padding: 0.6em;
max-width: 40%;
border-radius: 1em;
background-color: #252122;
}
aside{
max-width: 200px;
float: left;
min-height: 600px;
color: #b49898;
background-color: #483838;
}
aside p{
padding: 0px 20px;
}
section {
padding:10px;
float: left;
max-width: 80%;
}
article p{
padding-top: 3%;
}
footer {
clear: both;
background-color: #b49898;
text-align: center;
font-size: 85%;
min-height:100px;
}
footer p {
padding-top: 3%;
}
/* BEGIN MENU STYLE */
nav {
margin:0 0 0 200px;
position: relative;
top:10.5%; /* this code changed - may need to tweak! */
}
Nav ul {
Margin:0;
list-style: none;
}
nav ul li{
display: inline-block;
margin: 0 0.35em;
/* WEEK 2 VAULE ADD */
position: relative;float: left;
}
/* NESTED UL SET STYLE */
nav ul li ul {
display: none;
}
/* END NESTED UL SET STYLE */
nav ul li a {
/* border-radius: 5px;
color: #e1e2dd;
text-decoration: none;
padding: 0.6em 1.2em 0.6em 1.2em;
background-color: #483838;
outline: 0; */
/* WEEK 2 VAULE ADD */
font-size: 110%;
display: block;
color: #e1e2dd;
border-radius: 8px 8px 0 0;/*dog-ears the top, flattens the bottom */
text-decoration: none;
/* PADDING LINE UP (top, right, bottom, and left) */
padding: 0.6em 1.2em 0.6em 1.2em; /*the same spacing as before*/
background-color: #483838;
margin-left: -1px; /*Pull them in close!*/
white-space: nowrap; /* Don't let long menu selections fall to the next line- messes with display!*/
outline: 0; /* some browsers will outline a link- we would rather it not */
}
/* GO, GO, GADGET MENU EFFECTS! */
nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active {
background-color: #e1e2dd;
color: #483838;
}
/* SUB MENU CONTROLS */
nav ul li:hover ul a,
nav ul li.hover ul a
{
background-color: #483838;
color: #e1e2dd;
width: 130px; /* as promised - this is what makes a uniform sub-menu display */
border-radius: 0;
text-align: left;
padding-left: 0.6em;
}
nav li:hover ul,
nav li.hover ul {
display: block;
position: absolute;
float: none;
z-index:1000; /* add this for sub-menu over slider! */
}
nav ul li:hover ul a:hover,
nav ul li.hover ul a:hover,
nav ul li.hover ul a:focus,
nav ul li.hover il a:active {
background-color: #e1e2dd;
color: #483838;
}
/* END MENU STYLE */
img {
padding: 0.3em;
}
.cols {
/*-webkit-column-count: 3;
-moz-column-count:3;
column-count: 3;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;*/
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}
.cols-span {
-webkit-column-span: all;
-moz-column-span: all;
column-span:all;
font-size: 1.2 em;
margin-bottom: 0.2 em;
line-height: 1.2em;
}
.cols p {
margin-bottom: 1.1em;
text-align: justify;
}
.lead {
font-family: Georgia;
font-size: 1.3em;
text-align: left;
font-style: italic;
}
.rgt {
float: right;
max-width: 30%;
}
.spec {
margin:15px 0 10px 0;
border-bottom:1px solid #483838;
line-height:0;
}
.ads {
float: right;
text-align: center;
font-size: 90%;
color: #b49898;
background-color: #483838;
}
.ads p {
padding-top: 0.3em;
}
#wrapper {
background-image: url('images/bg01.png');
}
/* New Class */
.smImg {
float: left;
max-width:30%;
padding-right: 0.4em;
}
/* new selector - This will allow the images to shrink as we lose display width. It will come in handy a bit later. */
article img {
max-width:100%;
}
/* Change the top margin on the seperator code */
.spec {
margin:15px 0 10px 0;
border-bottom:1px solid #483838;
line-height:0;
}
/* ********************* Slider ********************** */
/* New in version 1.7+ */
#slider3 {
width:99%;
height: 400px;
list-style: none;
}
/* images with caption */
#slider3 img {
width: 100%;
height: 100%;
}
/* position the panels so the captions appear correctly */
#slider3 .panel {
position: relative;
}
/* captions */
#slider3 .caption-top, #slider3 .caption-right, #slider3 .caption-bottom, #slider3 .caption-left {
background:#000;
color: #fff;
padding: 10px;
margin: 0;
position: relative;
z-index: 10;
opacity: 0.8;
filter: alpha(opacity=80);
}
/* Top caption - padding is included in the width (480px here, 500px in the script), same for height */
#slider3 .caption-top {
left: 0;
top: 0;
width: 480px;
height: 30px;
}
/* Right caption - padding is included in the width (130px here, 150px in the script), same for height */
#slider3 .caption-right {
right:0;
bottom:0;
width:130px;
height:180px;
}
/* Bottom caption - padding is included in the width (480px here, 500px in the script), same for height */
#slider3 .caption-bottom {
left:0;
bottom:0;
width:480px;
height:30px;
}
/* Left caption - padding is included in the width (130px here, 150px in the script), same for height */
#slider3 .caption-left {
left: 0;
bottom: 0;
width:130px;
height:180px;
}
/* Caption close button */
.caption-top .close, .caption-right .close, .caption-bottom .close, .caption-left .close {
font-size: 80%;
cursor: pointer;
float: right;
display:inline-block;
}
video {
float: left;
padding: 5px;
margin-top: 10px;
}
歡迎來到SO。如果你在這裏添加你的代碼，它會有所幫助，所以我們可以看到它。如果代碼從鏈接位置刪除，我們就會鬆開問題！ –
我的歉意！我會把它放在帖子下面！ – Manyswagz
請編輯您的問題並將其添加到那裏。 –