所以我知道其中有很多，我已经尽可能多地经历了。
它在 JSFiddle 中有效，因为 fiddle 会自动为我执行 onload。
谢天谢地，我在 Chrome/IE/FireFox 中打开本地驱动器上的 html 脚本，布局和颜色是准确的，但我的 Javascript 没有加载。
我已经正确完成了我的文件夹结构，我已经进行了三重检查。
我已经在我的 html 文档末尾标记之前声明了我的 .js 脚本。
我试过使用 onclick 函数在 html 文档中打开一个新窗口并且它有效
尝试从 html 文档到 js 文档的相同 onclick 函数，不起作用。我很茫然。
现在我确定这无关紧要，但以防万一。我正在使用 Sublime Text 2 进行编码。
当我将鼠标悬停在网页上的箭头上时，我的鼠标确实会变成一只手，所以它似乎确实将箭头检测为可点击的图标/按钮，但幻灯片不会切换到下一张图片。
HTML:
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="warSupport.css" rel="stylesheet">
<link href="warMain.css" rel="stylesheet">
</head>
/受 Javascript 代码影响的 HTML 部分/
<div class="slider-nav"> <a href="#" class="arrow-prev"><img src="./Images/Buttons/arrow-prev.png"></a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul> <a href="#" class="arrow-next"><img src="./Images/Buttons/arrow-next.png"></a>
</div>
/HTML 文档结束/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src="warCode.js"></script>
</body>
</html>
Javascript 代码
var main = function () {
$('.arrow-next').click(function () {
var curSlide = $('.active-slide');
var nexSlide = curSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nexSlide.length == 0) {
nexSlide = $('.slide').first();
};
if (nextDot.length == 0) {
nextDot = $('.dot').first();
}
curSlide.fadeOut(600).removeClass('active-slide');
nexSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function () {
var curSlide = $('.active-slide');
var prevSlide = curSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length == 0) {
prevSlide = $('.slide').last();
}
if (prevDot.length == 0) {
prevDot = $('.dot').last();
}
curSlide.fadeOut(500).removeClass('active-slide');
prevSlide.fadeIn(500).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
受影响的 HTML 部分的 CSS 代码
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family:'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family:'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: center;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family:"HelveticaNeueMdCn", Helvetica, sans-serif;
font-family:'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
感谢您的宝贵时间。
最佳答案
您的文档末尾似乎从不同的 CDN 导入了 jQuery 两次。这可能是问题所在。
关于Javascript 未加载到 HTML 文档中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27832730/