Javascript Jquery galleriffic如何对每张幻灯片应用单独的div

我目前正在使用jquery Gallerific插件来显示许多图像（地图）。Jquery似乎使用一个索引生成每个div/images，因此我想知道如何根据当前索引应用不同的div/images来显示

例如，每张幻灯片将包含一张像图像滑块一样旋转的地图图片（多张地图）。我想要不同位置的小图像（如谷歌地图上的标记），当鼠标悬停在上面时，将显示一个简单的css精灵“更多信息”框

我正在努力解决这样一个问题，即不知道如何唯一地标识每个幻灯片，如何将div/图像应用于javascript中的容器

生成图像幻灯片的部分代码：

buildImage: function(imageData, isSync) {
            var gallery = this;
            var nextIndex = this.getNextIndex(imageData.index);

            // Construct new hidden span for the image
            var newSlide = this.$imageContainer
                .append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#"></a></span>')
                .find('span.current').css('opacity', '0');

            newSlide.find('a')
                .append(imageData.image)
                .click(function(e) {
                    gallery.clickHandler(e, this);
                });

buildImage:function（imageData，isSync）{
var gallery=这个；
var nextIndex=this.getNextIndex（imageData.index）；
//为图像构造新的隐藏范围
var newSlide=this.$imageContainer
.append（“”）
.find（'span.current'）.css（'opacity'，'0'）；
newSlide.find（'a'）
.append（imageData.image）
。单击（功能（e）{
gallery.clickHandler（e，this）；
});

感谢您的帮助/指导

---

-谢谢

为什么不使用Gallerific插件本身上的

onSlideChange

回调来确定图像悬停时的操作

jQuery(document).ready(function($) {
    var _currentSlide = -1;
    var gallery = $('#thumbs').galleriffic({
        onSlideChange: function(prevIndex, nextIndex) {
            //use nextIndex to determine what mouseover event does
            _currentSlide = nextIndex;
        }
     }

      $(".mainImageClass").mouseover(function() {
          //hide all current markers
          $(".marker").hide();
          //show only the relevant marker
          $(".marker[rel='" + _currentIndex + "']").show();
      });
 }

HTML:

在幻灯片上显示的内容#1 超过2秒时要显示的内容 ...

---

我会利用此事件，而不是修改源文件。

谢谢，这解决了鼠标悬停问题，但我希望每张幻灯片都有唯一的标记，但这些标记仍会出现在每张幻灯片上。在不同的幻灯片上有单独的唯一标记的最佳方式是什么？谢谢

<div class='marker' rel='1'>Content to show when over slide #1</div>
<div class='marker' rel='2'>Content to show when over 2</div>
...