这是我的HTML代码：
var picList = ["http://www.acidre.com/dummy/16:9x1080", "http://www.nexusnetsolutions.com/image/product.png", "http://lehmanlaw.mn/wp-content/uploads/2016/03/vga-1.png"];
function nextPic() {
var cur = 0;
var f = 0;
var x = document.getElementById("pics").src;
for (cur = 0; cur < picList.length; cur++) {
if (x == picList[cur]) {
f = 1;
break;
}
}
if (f == 1) {
if (cur < picList.length - 1) {
document.getElementById("pics").src = picList[cur + 1];
}
}
}
function prevPic() {
var cur = 0;
var f = 0;
var x = document.getElementById("pics").src;
for (cur = 0; cur < picList.length; cur++) {
if (x == picList[cur]) {
f = 1;
break;
}
}
if (f == 1) {
if (cur > 0) {
document.getElementById("pics").src = picList[cur - 1];
}
}
}header {
position: absolute;
display: block;
background: cyan;
height: 150px;
width: 1350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1 {
color: white;
position: absoute;
padding-left: 450px;
padding-top: 15px;
font-family: 'Cabin', sans-serif;
font-size: 50px;
font-variant: small-caps;
}
#pics {
margin-top: 170px;
margin-left: 270px;
}
#bnext {
position: absolute;
margin-left: 100px;
margin-top: 400px;
width: 80px;
}
#bprev {
position: absolute;
margin-left: -980px;
margin-top: 400px;
width: 80px;
}<header>
<h1>Image Showcase</h1>
</header>
<img id="pics" src="http://lehmanlaw.mn/wp-content/uploads/2016/03/vga-1.png" alt="Forms" width="800px" height="500px"></img>
<button id="bnext" type="button" onclick="nextPic()">Next</input>
<button id="bprev" type="button" onclick="prevPic()">Previous</input>
点击下一个和上一个按钮时没有任何事情发生。无法理解为什么......如果有人提供解决方案将会非常有用
答案 0 :(得分：1)
为什么要检查图像来源？
if (x == picList[cur]) {
f = 1;
break;
}
除了某些条件外，我无法看到你改变了你的形象：
if (cur ...) {
document.getElementById("pics").src = ...;
}
所有这些都不需要。你只需要根据阵列内容切换图像，并添加你的条件，以防止未定义的＆＃39;数组索引。
这是一个简单的工作示例代码：
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Image Showcase</h1>
</header>
<img id="pics" src="http://lehmanlaw.mn/wp-content/uploads/2016/03/vga-1.png" alt="Forms" width="800px" height="500px"></img>
<button id="bnext" type="button">Next</input>
<button id="bprev" type="button">Previous</input>
<script>
(function(){
var images = ["http://www.w3schools.com/images/w3schoolscom_gray.gif", "none"];
var index = 0;
function prevImage() {
index--;
index = index < 0 ? 0 : index;
return images[index];
}
function nextImage() {
index++;
index = index >= images.length ? images.length - 1 : index;
return images[index];
}
document.querySelector("#bprev").onclick= function() {
document.querySelector("#pics").src = prevImage();
}
document.querySelector("#bnext").onclick= function() {
document.querySelector("#pics").src = nextImage();
}
})();
</script>
</body>
</html>
答案 1 :(得分：0)
您的Html按钮不正确，请将其更改为。
<button id="bnext" type="button" onclick="nextPic()">Next</button >
<button id="bprev" type="button" onclick="prevPic()">Previous</button>
答案 2 :(得分：0)
cmake --build .var picList = ["http://allwebco-templates.com/support/picts/sample-image.jpg",
"http://mfs1.cdnsw.com/fs/cc0/normal/cx0ms-193.jpg",
"https://freethumbs.dreamstime.com/114/big/free_1145336.jpg",
"http://images.all-free-download.com/images/graphicthumb/male_lion_193754.jpg"
];
var currentIndex = 0;
var pic = document.getElementById("pics");
function nextPic() {
pic.src = picList[(currentIndex++) % picList.length];
}
function prevPic() {
if (currentIndex == 0)
currentIndex = picList.length - 1;
else
currentIndex = currentIndex - 1;
pic.src = picList[currentIndex];
}header {
position: absolute;
display: block;
background: cyan;
height: 150px;
width: 1350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1 {
color: white;
position: absoute;
padding-left: 450px;
padding-top: 15px;
font-family: 'Cabin', sans-serif;
font-size: 50px;
font-variant: small-caps;
}
#pics {
margin-top: 170px;
margin-left: 270px;
}
答案 3 :(得分：0)
以下是一个以略微不同的方式执行此操作的示例。有一件事是我在JS文件中删除了调用，而不是调用内联的prevPic（）nextPic（）。
JS
var picList = [
'http://orig10.deviantart.net/78b3/f/2009/025/0/0/0044146485035ccdcc4f99a681af80c6.jpg',
'http://pre15.deviantart.net/39b2/th/pre/i/2012/221/3/3/square_2_by_lilith1995-d5ag32b.jpg',
'http://img15.deviantart.net/4e63/i/2010/188/6/c/fly__fly_away___sqaure_crop_by_tagirocks.jpg',
'http://img13.deviantart.net/036f/i/2016/287/c/3/harley_quinn_by_mz09-dakslb5.jpg',
];
function imageShowCase(list) {
var cur = 0;
var img = document.getElementById('pics');
/* Use controls element to delegate from buttons */
var controls = document.getElementById('controls');
/* Update the image src */
var update = function(index) {
img.src = list[index];
};
/* Count up on the current index, reset to 0 if reaced the total length of array */
var next = function() {
cur = (cur < list.length - 1) ? (cur + 1) : 0;
};
/* Count down, reset to length of array, minus 1 */
var prev = function() {
cur = (cur === 0) ? (cur = list.length - 1) : cur - 1;
};
/* Delegate to the controls elememt */
controls.addEventListener('click', function(e) {
/* Stop any event bubling */
e.stopPropagation();
/* Check which element was clicked by comparing IDs */
if (e.target.id === 'bnext') { next(); }
else if (e.target.id === 'bprev') { prev(); }
else { return; }
/* Render the image with new src */
update(cur);
});
}
imageShowCase(picList);
CSS
header{
display: block;
background: cyan;
height: 150px;
width: 1350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1{
color: white;
position: absoute;
padding-left: 450px;
padding-top: 15px;
font-family: 'Cabin', sans-serif;
font-size: 50px;
font-variant: small-caps;
}
.wrapper {
margin: 0 auto;
max-width: 400px;
}
#pics{
width: 100%;
}
#bnext{
width: 80px;
}
#bprev{
width: 80px;
}
HTML
<header>
<h1>Image Showcase</h1>
</header>
<div class="wrapper">
<div id="controls">
<button id="bprev" type="button">Previous</button>
<button id="bnext" type="button">Next</button>
</div>
<br>
<img id="pics" src="http://orig10.deviantart.net/78b3/f/2009/025/0/0/0044146485035ccdcc4f99a681af80c6.jpg"/>
</div>