在slideChange上重新加载单个iFrame

Question

我为我学校的毕业展示编写了一个互动展览。

我使用Swiper Slider，我在每张幻灯片中放置了嵌入式SoundCloud iFrame。我希望一旦用户收听音频并移动到下一个滑块，之前的嵌入音频就会重新加载iFrame。

目前我无法访问SoundCloud的API，因此确定不行。

我现在所拥有的功能，但它不是重新加载slideChange上的上一个滑块的iFrame，而是只能定位特定的iFrame。

因此我针对所有iFrame，以防展览的下一个用户出现并意识到所有音频都已播放，除非手动搜索（这是一个糟糕的用户体验），否则用户无法重启。我做的是：

var reload1 = $("#reload1");
var reload2 = $("#reload2");
var reload3 = $("#reload3");
var reload4 = $("#reload4");
var reload5 = $("#reload5");

swiper.on("slideChange", function() {
  reload1.attr("src", function(i, val) {return val;});
  reload2.attr("src", function(i, val) {return val;});
  reload3.attr("src", function(i, val) {return val;});
  reload4.attr("src", function(i, val) {return val;});
  reload5.attr("src", function(i, val) {return val;});
});

对不起，如果它看起来很草率和基本，我只是在基础级别学习JavaScript。

这里是CodePen：https://codepen.io/aahlfeeyann/pen/aYyevp

如果有人对此有任何建议或解决方案，我将不胜感激，谢谢！

Answer 1

任何漂亮的滑块或轮播都有index个调用方法或属性。所以基本上你需要同样的东西。

如何只加载以前的幻灯片iframe？

• 在幻灯片更改时，获取上一个索引。
• 获取上一帧[{1}}并使用id索引重置之前iframe的src。

这就是你想要的：

JS更新：

id

  

Codepen link可以玩。

希望这能帮到你！