Question

我似乎无法让我的幻灯片显示正常工作，当它在空白的HTML页面上时，它可以正常工作但是当我尝试将其合并到我的网站时它确实会出现但我是无法使用“下一个”和“上一个”按钮。有人可以帮我排除故障吗？感谢。

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);
}

Answer 1

if (imageNumber > imageLength) {
    imageNumber = 0;
}
if (imageNumber < 0) {
    imageNumber = imageLength;
}

这是你的问题。想象一下x >= imageLength。您将imageNumber重置为0，然后快速将其转换为无法正常工作的循环。

Javascript幻灯片按钮不起作用

1 个答案: