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
    }

Javascript

＆＃13;

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

＆＃13;

HTML

＆＃13;

<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>

＆＃13;

Answer 1

如果您有以下HTML

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

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

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

希望这个示例代码会给出一些提示

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

1 个答案: