Javascript/jquery在相冊上顯示並隱藏div

這顯示當按鈕被點擊時隱藏的代碼滑動相片縮略圖等。您可以找到該網站，我在這裏創造www.samuelbradley.comJavascript/jquery在相冊上顯示並隱藏div

$(document).ready(function(){ 

hidden = true; 
$(".btn-slide").click(function() { 
if(hidden == false) { 

    $("#slideshow").slideDown('3000, linear, callback'); 
    $("#thumbs").slideUp('3000, linear, callback'); 
    hidden = true; 
} else { 
    $("#slideshow").slideUp('3000, linear, callback'); 
    $("#thumbs").slideDown('3000, linear, callback'); 
    hidden = false; 
} 
}); 
}); 

$(document).ready(function(){ 

hidden = true; 
$(".thumb").click(function() { 
if(hidden == false) { 

    $("#slideshow").slideDown('3000, linear, callback'); 
    $("#thumbs").slideUp('3000, linear, callback'); 
    hidden = true; 
} else { 
    $("#slideshow").slideUp('3000, linear, callback'); 
    $("#thumbs").slideDown('3000, linear, callback'); 
    hidden = false; 
} 
}); 
});

這段代碼顯示其中包含縮略圖等列表中的HTML代碼

<div id="thumbnail-image"><a href="#" ><img src="images/thumbnail.jpg" alt="thumanil-  image" title="Thumbnail View for Samuel Bradley" width="40" border="0" class="btn-slide" /></a> 
</div><!--end of thumbnail image--> 

</div><!--end of header--> 

<div id="controlholder"> 
<div id="controls"></div> 
</div> 

<div id="slideshow"> 
</div> 

<div id="thumbs"> 
<ul class="thumbs noscript"> 
<li><a href="images/archive/live-tour/1_noelfielding.jpg" title="Samuel Bradley   Photography" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/1 NOEL FIEDLING_THE BIG CHILL_thumb" width="185" alt="Samuel Bradley" border="0"/></a></li> 
<li><a href="images/archive/live-tour/2_noelfielding.jpg" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/2_NOEL FIELDING, THE BIG CHILL_thumb" width="185"  alt="Samuel Bradley" border="0"/></a></li> 
<li><a href="images/archive/live-tour/3_dylanmoran.jpg" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/3_DYLAN MORAN_THE BIG CHILL_thumb" width="185" alt="Samuel Bradley" border="0"/></a></li> 
<li><a href="images/archive/live-tour/4_youmeatsix.jpg" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/4_YOU ME AT SIX, HOLD ME DOWN TOUR_thumb" width="185" alt="Samuel Bradley" border="0"/></a></li>

的大圖像加載到#slideshow div顯示和隱藏很容易但我似乎無法隱藏拇指div？即使當我設置#thumbs div顯示：它仍然顯示。我基本上只是想大圖像顯示，當一個頁面加載，然後拇指div切換全景&縮略圖視圖，但我不希望能夠看到縮略圖和大圖像在同一時間。任何幫助將不勝感激。我希望我已經解釋並展示了足夠的例子嗎？

索菲

來源

2011-08-15 Sofi Smith

它很難分析手頭的問題。請提供用於幻燈片顯示的css，或者提供css文件的本地位置。 –

一些評論：您可以將這兩個.ready（）函數合併爲一個，而不是兩者都需要。您在代碼中引用了這個「回調」函數，但似乎並不存在。它看起來像你從某處複製這段代碼。幻燈片後，你可能需要也可能不需要做些什麼，滑動。如果你沒有，並且沒有回調函數，我敢打賭，你的JavaScript會在第一個函數調用時死亡。 –

謝謝大家的幫助，最終隱藏在準備好的工作上，但與我的一些其他陳述混淆。 –

我有一個在現場看，它的方式看起來不錯。

對於我來說，除了在加載時實際顯示`#thumbs'div之外，它對我有用。你試過了嗎：

$('#thumbs').hide();

在`.ready（）函數之一中？這應該在開始時隱藏該div。

來源

2011-08-15 22:05:36 Joe

這工作到底有點重新調整。非常感謝您的幫助和反饋！在月球上，它一直在我的頭上。 –

Javascript/jquery在相冊上顯示並隱藏div

回答

相關問題