我仍在学习 Javascipt 的基础知识，但我似乎在使用 everythingslider 时遇到了一些问题。无论我重新整理这段代码多少次，我似乎都找不到错误，并且 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;
}
最佳答案
您的 JavaScript 中的字符不正确
将 &.fn.accessibleDropDown 行更改为 $.fn.accessibleDropDown - 它是脚本标记中的最后一个代码块。
关于javascript - 任何 slider 未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40586317/