在jquery轮播顶部添加div层。艰难的一个

Question

我有一个艰难的，这对我来说很难，因为我对整个jQuery旋转木马的东西都是新手，在此项目之前从未构建过。

这是我的问题。

如果你转到 TEST SITE，你会看到一个蓝色背景的卷轴，大约在页面的一半。如果您将鼠标移到“数据分析”幻灯片上，您应该看到黑框淡入。

这是我的困境。我希望黑盒子是一个连接到数据分析幻灯片的菜单。我已经为你做了一个模拟，所以你可以看到我在说什么。

这是我的滚动条代码。我正在使用jCarousel。

 <div class="carousel">

 <ul>
     <li>
          <div id="homeslide1">
     testers sdfasdfasdfas asdftjhs iasndkad kasdnf
     <a href="#" id="#homeslide1-toggle">Close this</a>  </div>  
     <a href="#" id="homeslide1-show"><img src="<?php bloginfo('template_url'); ?>/images/home_data_analytics.jpg" width="200" height="94" /></a>


     </li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_oem_partnerships.jpg" width="200" height="94" /></li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_reporting.jpg" width="200" height="92" /></li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_returning_lost_customers.jpg" width="200" height="92" /></li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_sales.jpg" width="200" height="92" /></li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_service_retention.jpg" width="200" height="92" /></li>
  </ul>

这是我的卷轴css

 /*HOMEPAGE SCROLLER*/
  .carousel {!important padding:10px; width: 890px; margin: 0px 0px 0px 26px;}
  .carousel ul li element.style{height: 94px;}
.carousel ul{width: 200px; padding: 5px;}
.carouselitem{height: 94px;}
.prev{background: url(images/home_left_scroll.png); height: 94px; width: 16px; text-indent: -999px; outline: none; cursor:pointer; float: left;}
.next{background: url(images/home_right_scroll.png); height: 94px; width: 16px; text-indent: -999px; outline: none; cursor:pointer; float: right;}
.carousel ul li{ padding: 0px 3px 0px 3px; margin: 0px; height:!important 94px;
}
.home_right_arrow{
     width: 16px;
     float: right;}
    .home_left_arrow{
     width: 16px;
     float: left;}
.homeslide1{
    width: 200px;
    height: 94px;}

我尝试过各种各样的z-index技巧，但似乎无法自己解决这个问题。如果你解决了这个谜题，如果我们见面，我会给你买啤酒。我还会通过互联网给你一个高五。

有没有一种简单的方法可以通过jQuery来做到这一点？如果是这样，你能指出我正确的方向吗？

非常感谢。

Answer 1

我打算使用您的网站做一个示例，但代码太难以导航。基本上，您只需要使用offset获取链接元素的位置，然后使用它来设置菜单的偏移量。所以是的，使用绝对定位;到目前为止，这是最简单的方法。您可能还需要让a填充整个空间display: block;并设置其尺寸。

这是an example。在制作它时，我发现由于某种原因，当它被多次使用时相对于旧位置应用了偏移。我无法解释原因，但使用.css(left: x, top: y)来设置工作位置。