如何在不重新加载页面的情况下动态交换图像

Question

我想为我的产品页面创建一个水平滚动，我过去已经这样做过，所以我有一个关于如何继续的想法，但这次我希望点击的图像是更大的尺寸，例如 600x600，而该图像底部的所有其他图像的大小为 100x100。在大图像的一侧有一个左右箭头，如果向左/向右按下箭头，请将该大图像与小尺寸 100x100 中的上一张/下一张交换。这些图像是使用 php 设置的，因为它们在服务器中，这也是我发现很难的部分，我不知道如何使用 javascript 来更改 php 文件中的图像。

用于获取图像的 PHP 代码

$imgSet = "<img src='../ProductImages/$pID.jpg' class='image' onclick='openNav()'>";
$imgZoom = "<img src='../ProductImages/$pID.jpg' width='600px' height='600px'>";
$pInfo = "nothing for now";
$pDetails = $row['PROD_DETAILS'];
$sql = ("SELECT * FROM CHILD_IMG WHERE PROD_ID = '$pID';");
$getQuery = $connection->query($sql);
while($row = $getQuery->fetch_array()){
$childID = $row['ID'];
$parentID = $row['PROD_ID'];
$childName = $parentID . "_".$childID.".jpg";
$childImg .= "<img src='../ProductImages
/ChildImages/$childName' class='imgBotSize' onclick='openNav()'>";
Child images all the ones on the bottom of the big image
}

爪哇语

function openNav() {
document.getElementById("flow").style.height = "100%";
}
function closeNav() {
document.getElementById("flow").style.height = "0%";
}

.HTML

<div id="flow" class="overlayImgContainer">
<a class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-img-content">
<a><?php echo $imgZoom;?></a>
<div class="imgSlideGroup">
<a><?php echo $childImg;?></a>
</div>
</div>
<div class="arrowBtn" style="right: 40px">
<img src="../arrow-right-white.png" width="70px" height="120px">
</div>
<div class="arrowBtn" style="left: 40px">
<img src="../arrow-left-white.png" width="70px" height="120px">
</div>
</div>

Answer 1

如果你有如下所示的HTML

<div class="leftArrow"></div>
<div>
<img src="../smaller.jpg" class="selectedImage">
</div>
<div class="rightArrow"></div>

在JS中，您可以选择单击的图像并将URL重置为更大的图像，并更改图像的样式，如下所示。

var selectedImage =  document.querySelector('.selectedImage');
selectedImage.onclick = function(){
selectedImage.src = '../bigger/jpg';
selectedImage.style.height = '400px';
selectedImage.style.width = '300px';
}

希望此示例代码能提供一些提示