Javascript 图像隐藏和显示不起作用

我用它来缩放和平移图像。我已经成功地将它应用到我的单个图像项目中，现在我想添加。corousal，因此我可以将其用于多个图像。当我在custom.js中添加相应的部分时，它无法正常工作

我会附上两个屏幕排序，这将清除图片

这是第一例

单击右corousal按钮后

我只能看到背景，但看不到所需的图像。我不明白我错过了什么

这是我一直在使用的html部分

    <div class="image-display" id="displayplan4" style="width:70%;height:120%; left:39%;top:10%;position:absolute;display:none;"> 

        <img src="images/amenities.jpg" style="width:150%;height:130%; left:-60%;top:-20%;position:absolute;overflow:auto; z-index:1;">
        <div style="width:150%;height:130%; left:-60%;top:-20%;position:absolute;background:rgba(255,255,255,0.7);z-index:2;">
        </div>

        <img class="planzoom" src="gallery/Residential/ongoing/Almog/Plan/almog1.jpg" id = "almogplan0" style="width:100%;height:100%; right:3%;top:50%;position:absolute;z-index:3;">
                    <!--button for forward and backward movement-->
            <a href="#" > <img src="innerimages/forward.gif" id="almogforward" style="position:absolute;height:3%;width:2%;z-index:3;top:25%;right:20%;"></a>
            <a href="#" ><img src="innerimages/back.gif"     id="almogback"    style="position:absolute;height:3%;width:2%;z-index:3;top:25%;left:0%;"></a>
    </div>

及

并在相应的js部分显示和隐藏图像，鼠标点击图像

var almog_plan_div=0;

//Function for image forward with forward button
$("#almogforward").click(function () 
{
    if(almog_plan_div<1)
    {
        $("#almogplan"+almog_plan_div).hide();
        almog_plan_div++;
        $("#almogplan"+almog_plan_div).show();
    }
    else
    {
        $("#almogplan"+almog_plan_div).hide();
        almog_plan_div=0;
        $("#almogplan"+almog_plan_div).show();
    }
}); 

//Function for image backward with backward button
$("#almogback").click(function () 
{ 
    if(almog_plan_div>0)
    {
        $("#almogplan"+almog_plan_div).hide();
        almog_plan_div--;
        $("#almogplan"+almog_plan_div).show();
    }
    else
    {
        $("#almogplan"+almog_plan_div).hide();
        almog_plan_div=1;
        $("#almogplan"+almog_plan_div).show();
    }
});

我曾尝试添加“显示：无样式”属性，但这无助于我的事业，

---

有什么帮助吗？

删除img标签中的内联样式显示：无，然后在初始化页面时，使用隐藏功能隐藏该图像

---

内联样式可能会覆盖这一点

多亏了你的两个答案，你们两个可能都不完全正确，但确实帮助我找到了解决方案

我错过的诀窍是：

我使用了两个不同的div，但我没有定位第二个div，我只注意到当我在一个只有两个图像的新网页中尝试整个过程时，它们没有正确定位。我的要求是隐藏div，我必须隐藏它们

2另外一件我必须去掉的是位置：独立图像元素的绝对值。

---

曾经纠正过它现在很酷。

你有现场演示吗？你是说像JSFIDLE之类的东西，我试过了，但没有成功创建它是的，或者是一个现场网站预览软件，你试图在同一页面上运行多个平滑实例？是的，我试过了，不适用吗？顺便说一句，我在删除网站链接后保留了一个小时，你检查过了吗？Ishita我太原始了，无法理解你的解决方案。你能确定你有以下代码：。。。现在，从这个标记中删除display:none，当页面加载时，或者在任何调用第一个函数来显示页面的地方，写下这行$almogplan1.hide；@石田尝试了你的解决方案，它不起作用可能是你要求我隐藏$almogplanII.hide；我也试过这个$almogplan1.hide，但无论如何，这是行不通的

var almog_plan_div=0;

//Function for image forward with forward button
$("#almogforward").click(function () 
{
    if(almog_plan_div<1)
    {
        $("#almogplan"+almog_plan_div).hide();
        almog_plan_div++;
        $("#almogplan"+almog_plan_div).show();
    }
    else
    {
        $("#almogplan"+almog_plan_div).hide();
        almog_plan_div=0;
        $("#almogplan"+almog_plan_div).show();
    }
}); 

//Function for image backward with backward button
$("#almogback").click(function () 
{ 
    if(almog_plan_div>0)
    {
        $("#almogplan"+almog_plan_div).hide();
        almog_plan_div--;
        $("#almogplan"+almog_plan_div).show();
    }
    else
    {
        $("#almogplan"+almog_plan_div).hide();
        almog_plan_div=1;
        $("#almogplan"+almog_plan_div).show();
    }
});