Javascript 动态创建Skrollr元素，滚动失败

我硬编码了一个Skrollr演示页面，效果很好。硬编码数据标签是乏味的，所以我开始动态创建img div。但是现在我不能让它工作了！ 我需要另一双眼睛来查看我的代码。我肯定我忽略了一些简单的事情。

理想情况下，当您向下滚动时，图像应显示为动画（通过切换其可见性），但div应保持在页面上的固定位置。

有一个Skrollr的好例子

下面是在JS运行之前的img div示例

<img data--10000-top="display:block;" data-1-top="display:none;" data-anchor-target="#bps_ux" data-src="images/bps/bps0001.jpg" src="images/bps/bps0001.jpg" class="frame preload skrollable skrollable-after" style="display: block;" alt="" >

然后我有一个JS函数，它带有一个for循环，附加到img div并将数据标记增加20。我认为我对数据的使用不太正确

一旦JS运行，div看起来像这样，但是有75个图像

<img class="frame preload" src="images/bps/bps0001.jpg" data-src="images/bps/bps0001.jpg" data-anchor-target="#bps_ux" data-20-top="display:block;" data-0-top="display:none;" alt="bpsSprite frame 0001">
<img class="frame preload" src="images/bps/bps0002.jpg" data-src="images/bps/bps0002.jpg" data-anchor-target="#bps_ux" data-1-top="display:none;" data--0-top="display:block;" data--20-top="display:none;" alt="bpsSprite frame 0002">
<img class="frame preload" src="images/bps/bps0003.jpg" data-src="images/bps/bps0003.jpg" data-anchor-target="#bps_ux" data-1-top="display:none;" data--20-top="display:block;" data--40-top="display:none;" alt="bpsSprite frame 0003">

这是我的完整代码测试链接

谢谢你的提示

---

-P

Skrollr不知道您的动态元素。两种选择

切换最后两个脚本标记的顺序（在创建图像后调用

init

）

添加图像后调用

s.refresh（）

---

请在问题中显示您的代码（不是指向包含代码的站点的链接），并告诉我们为什么它不起作用以及它应该做什么。@Syon好的，我更新了问题以使其更清楚。感谢您的帮助，我甚至没有意识到在加载图像之前我正在初始化Skrollr！啊！动态脚本现在工作得很有魅力！令人惊叹的！谢谢你救了我的命