Question

我使用 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>的{{1}}并将其与图像一起滑动。在每个图像循环开始时重复该文本。如果我注释掉了FilmRoll启动代码，我会得到一列绘画缩略图（正如预期的那样，没有滑动）但没有额外的document.write(SliderContent);中的文本，因此FilmRoll启动会导致问题，但我无法弄清楚它是如何做的或如何阻止它。有人有任何想法吗？ TIA。

Answer 1

我刚试用了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 });
});

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

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

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

FilmRoll加载额外的<div> </div>

1 个答案: