下拉式图库中的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点导航

回答

相关问题