动态创建Skrollr元素,滚动失败

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

理想情况下,当向下滚动时,图像应该显示为动画(通过切换其可见性),但div应该保持在页面上的固定位置。
http://moto.oakley.com
有一个很好的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">

这是我的测试链接和完整的代码
http://retropunk.com/files/bps-skrollr/

谢谢你的提示
-对