Question

我正在使用此jquery.smoothZoom.min.js来缩放和平移图像。我已成功将其应用于我的项目以获得单张图片，现在我想添加（＆lt;，＆gt; .ie corousal），以便我可以将它用于多个图像。当我在custom.js中添加相应的部分时，它无法正常工作。

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

这是第一个案例 enter image description here

并点击右侧corousal按钮后

enter image description here

我只能看到背景但不能看到所需的图像。我无法理解我所缺少的东西，

这是我一直在使用的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>

和

<div id = "almogplandivII">
            <img class="planzoom" src="gallery/Residential/ongoing/Almog/Plan/almog2.jpg" id= "almogplan1" style="width:100%;height:100%; right:3%;top:50%;position:absolute;z-index:3;display:none;">      
        </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();
    }
});

我尝试添加display:none样式属性，但它对我的原因没有帮助，对此有何帮助？

Answer 1

从img标签中删除内联样式显示：none，然后在初始化页面时，使用hide（）函数隐藏该图像。

内联样式可能会覆盖此

Answer 2

感谢你们的回答，你们两个可能都不完全正确，但绝对帮助我找到解决方案。

我失踪的伎俩：

我已经使用了两个不同的div，但是我没有定位第二个div（我只注意到当我在一个只有2个图像的新网页中尝试了整个内容时，它们没有正确定位）要求隐藏div，我不得不隐藏它们。

2）我必须删除的另一件事是来自单个图像元素的position:absolute事物。一旦纠正它现在很酷。

图像隐藏并显示无法正常工作

2 个答案: