我似乎无法让我的幻灯片放映正常工作，当它单独放在空白 HTML 页面上时它工作正常，但是当我尝试将它合并到我的网站时它确实出现了但我无法使用 Next 和以前的按钮。有人可以帮我解决问题吗？谢谢。
HTML
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Kawasaki Motorcycle Club UK</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="wrapper">
<header>
</header>
<nav>
<ul class="navbar">
<li><a href="bikes.html">BIKES</a></li>
<li><a href="news.html">NEWS</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="join.html">JOIN</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div>
<div class="contentbox">
<div id="maincontent"> //slideshow starts here
<img src="mybike.jpg" id="slideshow"/>
<br>
<div id="caption">
caption for image 1
</div>
<a href="#" onclick="changeImage(-1); return false;">Previous</a><br>
<a href="#" onclick="changeImage(-1); return false;"?>Next</a><br>
<script src="slideshow.js"></script>
</div>
</div>
<br>
<div>
<div class="socialcontainer">
<a href="facebooklink"><img id="facebookbutton"/></a>
<a href="twitterlink"><img id="twitterbutton"/></a>
<a href="googlelink"><img id="googlebutton"/></a>
</div>
</div>
</body>
Javascript
var images = ["mybike.jpg", "image2.jpg", "image3.jpg"];
var caption = ["My bike", "House", "Chess"];
var imageNumber = 0;
var imageLength = images.length - 1;
function changeImage(x) {
"use strict";
imageNumber += x;
// if reached end of array start over
if (imageNumber > imageLength) {
imageNumber = 0;
}
if (imageNumber < 0) {
imageNumber = imageLength;
}
document.getElementById("slideshow").src = images[imageNumber];
document.getElementById("caption").innerHTML = caption[imageNumber];
return false;
}
CSS
body {
font-family: 'Arial', sans-serif;
background-color: #000;
}
#wrapper {
max-width: 1000px;
margin: 0 auto;
background-color: #fff
padding: 32px;
}
header {
height: 110px;
background: url(header.png);
}
header h1 { //NOT NEEDED
text-align: center;
color: #FFF;
}
header h2 { //NOT NEEDED
font-variant: small-caps;
text-align: center;
color: #fff;
}
.navbar {
padding: 5px 0 5px 0;
text-align: center;
line-height: 35px;
background: url(navbar.png);
background-size: contain;
}
ul.navbar {
margin-top: 15px;
}
.navbar li {
display: inline;
padding: 0 40px 0 40px;
font-size: 30px;
font-weight: 800;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
background: #60bf19;
color: #FFF;
text-shadow:
-5px -5px 0 #000;
}
a:hover {
color:dimgrey;
text-shadow:
-5px -5px 0 #000;
}
a:active {
color: #FFF
text-shadow:
-5px -5px 0 #000;
}
.contentbox {
width: 1000px;
overflow:auto;
margin: 0 auto;
background-color: #383131;
border-radius: 5px;
}
#maincontent {
color: #FFF;
}
.sideimage {
float: right;
}
.socialcontainer {
width: auto;
height: auto;
text-align: center;
}
#facebookbutton {
background-image: url(facebook-hover.png);
height: 48px;
width: 48px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#facebookbutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
#twitterbutton {
background-image: url(twitter-hover.png);
height: 48px;
width: 48px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#twitterbutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
#googlebutton {
background-image: url(google-hover.png);
height: 48px;
width: 48px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#googlebutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
最佳答案
if (imageNumber > imageLength) {
imageNumber = 0;
}
if (imageNumber < 0) {
imageNumber = imageLength;
}
这是你的问题。想象一下 x >= imageLength。您将不断将 imageNumber 重置为 0，然后迅速将其变成无法正常工作的循环。
关于Javascript 幻灯片放映按钮不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29289865/