[英]Image hide and show not working
我正在使用此jquery.smoothZoom.min.js縮放和平移圖像。我已將其成功應用於我的項目中的單個圖像,現在我想添加(<,>。ie corousal),以便將其用於多張圖片。當我在custom.js中添加相應的部分時,它無法正常工作。
我將附加兩個屏幕種類以清除圖片
這是第一種情況
然后單擊右側的珊瑚按鈕
我只能看到背景,而看不到所需的圖像。 我不明白我在想什么,
這是我一直在使用的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
樣式屬性一樣,但這對我的事業沒有幫助,對此有任何幫助嗎?
刪除內聯樣式顯示:從img標簽中刪除任何內容,然后在初始化頁面時,使用hide()函數隱藏該圖像。
內聯樣式可能會覆蓋此問題
感謝您的兩個回答,你們倆可能都不完全正確,但絕對可以幫助我獲得解決方案。
我不知道的把戲:
我)使用了兩個不同的div,但是我沒有定位第二個div,(我只注意到當我在其中只有2張圖像的新網頁中嘗試整個操作時,它們的位置不正確)我的需求需要div要隱藏,我不得不將它們隱藏。
2)我必須刪除的另一件事是position:absolute
來自單個圖像元素的position:absolute
內容。 一旦糾正它現在很酷。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.