我已经实现了一个图像 slider ，它可以在按下按钮时改变图像!
现在我想实现在单击 div 时发生的图像更改。每个 div 显示不同的图像。我知道有一个使用 Javascript 的 onclick 函数。但是如何实现它。
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content w3-display-container" style=" width :939px;
height:359px; border: 2px solid black;">
<img class="mySlides" src="C:\wamp64\www\test\My Works\images\1.jpg"
style="width:638px;height:355px">
<img class="mySlides" src="C:\wamp64\www\test\My Works\images\2.jpg"
style="width:638px;height:355px;">
<div class = "texts">
<div class = "text1" style="width: 298px; height: 127px; border: 1px solid
red; text-align: center;padding-top: 26px; position: absolute; right:
0px; top:0px;"> Lorem Ipsum Is Lorem Ipsum <br> Lorem Ipsum Is Lorem Ipsum
</div>
<div class = "text2" style="width: 297px; height: 120px; border: 1px solid
red; text-align: center;padding-top: 26px; position: absolute; right:
0px; top:127px;"> Lorem Ipsum Is Lorem Ipsum <br> Lorem Ipsum Is Lorem Ipsum
</div>
<div class = "text3" style="width: 297px; height: 111px; border: 1px solid
red; text-align: center;padding-top: 26px; position: absolute; right:
0px; top:245px;"> Lorem Ipsum Is Lorem Ipsum <br> Lorem Ipsum Is Lorem Ipsum
</div>
</div>
<button class="w3-button w3-black w3-display-left"
onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-black w3-display-right"
onclick="plusDivs(1)">❯</button>
</div>
最佳答案
使用 javascript，您可以像这样单击 div 上的 img 标记的 src 属性。
HTML
<div onclick="changeImage('image1.jpg');">Div one</div>
<div onclick="changeImage('iamge2.jpg');">Div two</div>
<img src="" alt="Image" id="myImg">
Javascript
function changeImage(image){
document.getElementById('myImg').src = image;
}
然后通过使用 JQuery 这样做。
<div class="one">Div one</div>
<div class="two">Div two</div>
<img src="" alt="Image" id="myImg">
$('.one').on('click', function(){
$('#myImg').attr('src', 'image1.jpg');
});
$('.two').on('click', function(){
$('#myImg').attr('src', 'image2.jpg');
});
关于javascript - 单击每个文本 div 时如何更改图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43535627/