关于javascript：当用户点击“前进”或“后退”按钮时，如何更改显示的图像？

How do I change the image being displayed when the user clicks on a “forward” or “backward” button?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<img src="Aliens.jpg" class="imgclass">

<img src="Ayrton%20Senna.jpg" class="imgclass">

<img src="le%20Ferrari.jpg" class="imgclass">

<img src="Batman%20and%20bats.jpg" class="imgclass">

<button id="back">←</button>

<img src="Aliens.jpg" class="bigimg">

<button id="fwd">→</button>

$(".imgclass").click(function(){$(".bigimg").attr("src",$(this).attr("src"))});
var d=1;
$("img"+d).click();
$("#back").click(function(){d=d-1; if(d<1){d=4;} $("#img"+d).click()});
$("#fwd").click(function(){d=d+1; if(d>4){d=1;} $("#img"+d).click()});

我有4张IDsimg1到img4的图片。我放了两个按钮，上面写着"fwd"和"back"。当用户点击前进按钮时，如果显示img3，现在应该显示img4。如果他再次点击，应该显示img1。类似的工作也是我想要的后退按钮。.imgClass是为所有这些图像(img1、img2、img3、img4)指定的类，而.bigimg是显示这些图像的位置。但是，此代码不起作用！点击这两个按钮什么也不做。请告诉我哪里出错了。

相关讨论

尝试类似的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$(function(){
$('#back').click(function(){
prev = $('.activePic').prev();
if($('.activePic').is('[id^="img"]:first')) {
prev = $('[id^="img"]:last');
}
$('.activePic').removeClass('activePic');
prev.addClass('activePic');
$('.mainImg img').attr('src',prev.find('img').attr('src'));
});

$('#fwd').click(function(){
next = $('.activePic').next();
if($('.activePic').is('[id^="img"]:last')) {
next= $('[id^="img"]:first');
}
$('.activePic').removeClass('activePic');
next.addClass('activePic');
$('.mainImg img').attr('src',next.find('img').attr('src'));
});
});

https://jsfiddle.net/bbkyebcw/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$('#back').click(function() {
prev = $('.activePic').prev();
if ($('.activePic').is('[id^="img"]:first')) {
prev = $('[id^="img"]:last');
}
$('.activePic').removeClass('activePic');
prev.addClass('activePic');
$('.mainImg img').attr('src', prev.find('img').attr('src'));
});

$('#fwd').click(function() {
next = $('.activePic').next();
if ($('.activePic').is('[id^="img"]:last')) {
next = $('[id^="img"]:first');
}
$('.activePic').removeClass('activePic');
next.addClass('activePic');
$('.mainImg img').attr('src', next.find('img').attr('src'));
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

您需要将代码放在一个就绪的块中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(function() {
$(".imgclass").click(function() {
$(".bigimg").attr("src",$(this).attr("src"))
});

var d=1;
$("img"+d).click();
$("#back").click(function(){
d=d-1;
if(d<1){
d=4;
}
$("#img"+d).click()
});
$("#fwd").click(function(){
d=d+1;
if(d>4){
d=1;
}
$("#img"+d).click()
});
});

试试看；

这里您将click事件与.imgclass绑定在一起，当您执行此操作时，$("#img" + d).click();这是一个div元素，而不是图像更新后的选择器，在这个选择器中，您又犯了一个错误，忘记了预先准备#；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26