下拉式圖庫中的jquery點導航

我正在開發一個視差組合網站，並希望包含一些jquery功能。目前我有一個有效的下拉畫廊，但我想向畫廊添加點導航。一旦我添加了點導航，下拉功能停止工作。我已經在jsfiddle上建立了一個例子。第一個鏈接顯示下拉菜單功能。（目前同時打開每個畫廊。）第二個鏈接添加點導航。下拉式圖庫中的jquery點導航

http://jsfiddle.net/carincamen/pvphpcuw/12/

HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<body> 
<p>Click the small black box to show the large rectangle box.</p> 

<img class="arrow"> 

<div class="gallery"></div>

CSS：

.gallery { 
    position: relative; 
    width: 620px; 
    height: 215px; 
    top: 30px; 
    left: 50px; 
    background-color: rgb(0,0,0); 
} 

.arrow{ 
    position: relative; 
    width:20px; 
    height: 20px; 
    top: 15px; 
    left: 340px; 
    background-color: rgb(0,0,0); 
}

的jQuery：

$(document).ready(function(){ 
    var display =$('.gallery'); 
    $(display).hide(); 
    $('.arrow').click(function(){ 
    $(display).toggle(); 
    }); 
});

http://jsfiddle.net/carincamen/pvphpcuw/

爲了便於演示，我用顏色編碼了點導航按鈕以與幻燈片相對應。

非常感謝您的幫助。非常感謝。

來源

2014-12-01 Carin Camen

特別感謝LinkedIn羣組成員的提醒。點擊箭頭時畫廊下降，然後導航按鈕更換滑塊。小導航按鈕根據其相應的滑塊隨不透明度增加和減少，大圓會移至與滑塊對應的點導航。工作代碼可以在here找到。希望這是有幫助的。

我需要刪除$(this).next，只是使用$然後添加$("[class^=gallery]").hide()刪除以前的庫。

來源

2014-12-03 22:29:35

下拉式圖庫中的jquery點導航

回答

相關問題