jQuery Reel插件:动态显示或隐藏卷轴图像

时间:2014-07-22 07:53:33

标签: javascript jquery html jquery-reel

原谅我的英语。

我尝试使用jQuery Reel Plugin,它在我的html文件中完美运行。

 <img src="DSCN0691.jpg" width="210" height="186"
  class="reel"
  id="image1"
  data-images="fish/DSCN####.JPG|691..702">

但如果我通过document.innerHTML添加脚本,它根本不起作用。

图像会显示出来,但我无法将其卷起。

document.getElementById('Hello').innerHTML='<img src="fish/DSCN0691.JPG" width="210" height="186" class="reel" id="image2" data-images="fish/DSCN####.JPG|691..702">';

我也试过element.setAttribute(name, value)函数, 或使用jQuery加载整个html文件。 但结果却是这样......

不知道现在该做什么。

还是有其他解决方案我可以动态显示和隐藏卷轴图像吗?

非常感谢。

这里是整个脚本和项目。

JQuery Reel Project

 <script language="JavaScript">
 function WriteToFile(passForm) {       

document.getElementById('Hello').innerHTML='<img src="fish/DSCN0691.JPG" width="210" height="186" class="reel" id="image2" data-images="fish/DSCN####.JPG|691..702">';

 }
 </script>

<head>
    <script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
    <script src='jquery.reel.js' ></script>
</head>

<body>  
  <div id="Hello"></div>    
  <input type="button" value="submit" onclick="WriteToFile(this);">

  <img src="DSCN0691.jpg" width="210" height="186"
    class="reel"
    id="image1"
    data-images="fish/DSCN####.JPG|691..702">
  </body>

1 个答案:

答案 0 :(得分:0)

卷轴插件正在文档加载时使用“卷轴”类初始化所有图像。如果之后更改了HTML Dom,则需要初始化添加的图像。您可以通过以下javascript执行此操作:

$('#image').reel({
    images: 'fish/DSCN####.JPG|691..702'
});