Question

当幻灯片进入视图时，我想触发一个事件，例如当我们进入幻灯片2时，会出现一个弹出窗口。我尝试过各种各样的jquery插件但都没有成功。在我的所有尝试中，当浏览器最初加载幻灯片时会出现弹出窗口。

以下是我使用jquery.appear

的尝试

---
title: "XXXX"
output: ioslides_presentation
---

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://morr.github.io/javascripts/jquery.appear.js"></script>

## Slide 1
Nothing to see here

## Slide 2
<div id="pop"></div>

<script type="text/javascript">
$('#pop').appear(alert("Hi"));
</script>

我也尝试过选择器，例如#pop:visible和.current #pop

Answer 1

IOSlides将一个对象放在名为slidedeck的窗口名称空间中，该对象可用于以编程方式控制套牌。一种方法可能是监视当前幻灯片，并在代码更改时运行代码。

var curSlide = -1;
window.setInterval(function() {
  if (curSlide != window.slidedeck.curSlide_) {
     curSlide = window.slidedeck.curSlide_; 
     if (curSlide == 1) {
        // code to run when slide 2 appears goes here (curSlide_is 0-based)
     } else if (curSlide == 2) {
        // code to run when slide 3 appears goes here 
     }
  }
}, 100)

Answer 2

你可以尝试bSlider它有一个回调onSlideAfter，在每次幻灯片转换后立即执行。因此，您可以为每个幻灯片制作逻辑，使其在视口中完成后转换完成。您可以检查options的其余部分，找出哪一个最适合您：）

此处示例http://jsfiddle.net/ksd36798/

var slider = $('.bxslider').bxSlider({
    onSliderLoad: function () {
        // do funky JS stuff here
        //alert('Slider has finished loading. Click OK to continue!');
    },
    onSlideAfter: function () {        
        var current = slider.getCurrentSlide();
        if(current == 1){
             alert('Show your pop up if slide number is 1');
        }
    }
});

幻灯片外观上的事件触发

2 个答案: