javascript - FilmRoll加载额外的<div>

我正在使用来自straydogstudio的FilmRoll在我的美术协会的网站上滑动绘画。绘画URL由加载在头文件中的数组组装而成，并写入"film_roll"<div>中的html中。
js代码是：
var SliderContent=""
for (var i=0; i<totalRows; i+=1)
SliderContent = SliderContent+'<div><a href="' + imagelist[i][painting] + '"><img src="' + imagelist[i][thumbnail] + '" border="1" height="150px"></img></a></div>';

FilmRoll启动是：
$(document).ready(function () {
$(function() {
fr = new FilmRoll({
container: '#film_roll',
height: 150 }）}）}）`

和html是：
...
<div id="film_roll">
<script>document.write(SliderContent);</script>
</div>
...

这样会产生滑动的绘画缩略图行，但是会在包含文本<div>的document.write(SliderContent);前面加上图像并将其与图像一起滑动。在图像的每个循环开始时都会重复此文本。
如果我注释掉FilmRoll启动代码，则会得到一列绘画缩略图（按预期，没有滑动），但是多余的<div>中没有文本，因此FilmRoll启动会引起问题，但我不知道如何解决它正在执行或如何停止它。
有人有想法吗？
TIA。

最佳答案

我刚刚对FilmRoll进行了试验，可能找到了一种解决方法-而不是

<div id="film_roll">
  <script>document.write(SliderContent);</script>
</div>

只是有html的空容器

<div id="film_roll">
</div>

并将您的代码更改为此的调整版本：

$(document).ready(function () {
  var imagelist = [ /* place your images here */ ];
  var SliderContent="";
  for (var i=0; i<imagelist.length; i+=1){
    SliderContent = SliderContent+'<div><a href="' + imagelist[i] + '">
                    <img src="' + imagelist[i] + '" border="1" height="150px">
                    </img></a></div>';
  }
  $("#film_roll").append(SliderContent);

  fr = new FilmRoll({
    container: '#film_roll',
    height: 150 });
});

“调整版本”的含义是：显然，您的imagelist包含带有thumbnails和paintings的图像/元素。对于本示例，我仅在此Fiddle中添加了一些虚拟图像（没有缩略图/绘画作为imagelist对象的一部分），因此您必须进行调整。
由于我也不知道totalRows循环中的变量for，因此我仅将其替换为imagelist的长度（=此列表中的图像数量）。

由于我不知道FilmRoll是否有任何在线资源，我已经将整个filmroll.js复制到了Fiddle中，并将调整后的代码放在注释/* your code here */的底部。

主要调整是不要让<script>在div内编写SliderContent，因为这显然会导致FilmRoll问题。取而代之的是，在将图像从SliderContent附加到$("#film_roll").append(SliderContent);的for循环之后，只需使用imagelist附加SliderContent，然后初始化FilmRoll。