JavaScript幻灯片显示按钮不起作用

Question

I can't seem to get my slideshow working, it works fine when it is on it's own on a blank HTML page but when I try to incorporate it into my site it does appear but I am unable to use the Next and Previous buttons. 我似乎无法正常运行幻灯片，当它在空白HTML页面上单独运行时，它可以正常工作，但是当我尝试将其合并到我的网站时，它确实出现了，但是我无法使用“下一个”和“上一个”按钮。 Can someone help me troubleshoot? 有人可以帮我解决问题吗？ Thanks. 谢谢。

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 使用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 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;
}

Here's your problem. 这是你的问题。 Imagine having x >= imageLength . 想象一下x >= imageLength 。 You'll keep resetting imageNumber to 0 and then quickly turning it into a loop that doesn't work correctly. 您将继续将imageNumber重置为0，然后迅速将其变成无法正常工作的循环。

JavaScript幻灯片显示按钮不起作用

问题描述

1 个解决方案

解决方案1
1 2015-03-26 22:23:33

JavaScript幻灯片显示按钮不起作用

问题描述

1 个解决方案

解决方案1 1 2015-03-26 22:23:33

解决方案1
1 2015-03-26 22:23:33