更新1

Question

我尝试使用qTip在bxSlider中的图像上放置注释。默认情况下，qTip和bxSlider似乎可以很好地协同工作，但我已将其设置为默认显示qTip而不是mouseenter。当我转到下一张幻灯片时，上一张幻灯片的提示保持不变。这就是我现在所拥有的：

JSFiddle

bxSlider

$(document).ready(function(){
 var slider = $('.bxslider').bxSlider({
    adaptiveHeight: true,
    swipeThreshold: 100,
    oneToOneTouch: false,
    easing: 'cubic-bezier(0.600, 0.060, 0.500, 1)',
     onSliderLoad: function(){
  },
  onSlideBefore: function($slideElement, oldIndex, newIndex) {
    $('.qtip').hide();
},
  onSlideAfter: function($slideElement){
  jQuery('video').trigger('play');
  $('.qtip').show();
  },
}).on('click', function(){
    slider.goToNextSlide();
});

  });

qTip

$(document).ready(function()
{
    $('area[alt]').qtip(
    {
     hide: false,
        content: {
            attr: 'alt' // Use the ALT attribute of the area map for the content
        },
         show: {
        ready: true
        },
        style: {
            classes: 'caption'
        }
    });
});

我如何进行定位并仅显示当前幻灯片的提示？

Answer 1

我得到的提示只显示它所属的幻灯片。我认为这就是你的回调被调用的方式。图像映射中有一个链接没有做任何事情，所以我将preventDefault()放在你的视频触发器中（目前什么都不做。）我试图更均匀地分离你的事件，因为在幻灯片中有很多东西在进行过渡。这是 fiddle 顺便说一句，有一个打开的figure结束标记和一个打开的li标记，我将它们评论出来。对不起，我不得不改名，这有助于我更快地思考。如果您需要更多信息，请告诉我。

更新1

我只想到了一些东西，第二张幻灯片上弹出了qTip，我原本认为这是一个回调问题。由于那些开放的figure和li结束标记实际上用作图像和幻灯片的结束标记，而不是隐藏它的qTip可能卡在该状态中。因此，基本上不是2张幻灯片，而是有一张大幻灯片，所以就qTip而言，猫图像是图像映射的一部分。

更新2

我注意到我的小提琴一直在破碎。经过进一步检查，我注意到bx外部文件托管在您的域上，并且所有URL都不是jsFiddle不喜欢的HTTPS。我使用的是jsDelivr for bxSlider，CDNjs for qTip和Microsoft for jQuery

HTML

    <ul class="bxslider">
    <li class="slide">
        <figure>
            <img src="http://i.imgur.com/vLRGSyz.png" usemap="#savage">
            <map id="savage" name="savage">
                <area shape="circle" alt="Adam Savage" title="Savage Twins" coords="330,131,32" href="#" target="_self" />
            </map>
        </figure>
    </li>
    <li class="slide">
        <figure>
            <img src="http://i.imgur.com/wQAnzvl.jpg" alt="cat" title="feline">
        </figure>
    </li>
    <!-- </figure>
   </li>-->
</ul>

的jQuery

$(document).ready(function () {
    var bx = $('.bxslider').bxSlider({
        adaptiveHeight: true,
        swipeThreshold: 100,
        oneToOneTouch: false,
        easing: 'cubic-bezier(0.600, 0.060, 0.500, 1)',
        /*     onSliderLoad: function(){},*/
        onSlideBefore: function ($ele, from, to) {
            $('.qtip').hide();
        },
        onSlideAfter: function ($ele) {
            jQuery('video').on('play', function (eve) {
                eve.preventDefault();
                $('.qtip').show();
                this.on('click', function () {
                    var that = this;
                    bx.goToNextSlide(this, that[from], to);
                });
            });
        }
    });

});


$(document).ready(function () {
    $('area[alt]').qtip({
        hide: false,
        content: {
            attr: 'alt' // Use the ALT attribute of the area map for the content
        },
        show: {
            ready: true
        },
        style: {
            classes: 'caption'
        }
    });
});

更新3

未测试

/* Use: $(document).on('click', this, event handler); 
/* instead of $(this).click(event handler);
/* Create an .ON event handler */
$(document).on('click', '.area', function(event) {
    $(this).qtip({                // Bind qTip inside the .ON event handler
            overwrite: false,     // prevents qTip from being overridden
            content: $('.area'),  // area.area as content element
                 attr: 'alt',     // area.area[alt] as content
                 show: {          // SHOW qTip event when...
                    ready: true, /* ...when qTip is loaded, and READY */
                    event: event.type /*...when the EVENT (which is 'click') happens to THIS(which is .area) */
                 },
            },event); /* Pass the live event to qTip */
});

详细信息：http://qtip2.com/guides#integration

P.S。分配area元素.area

示例

<area **class="area"** shape="circle" alt="Adam Savage" title="Savage Twins" coords="330,131,32" href="#" target="_self" />

jQuery qTip with bxSlider

1 个答案:

更新1

更新2

HTML

的jQuery

更新3

未测试