jQuery Reel Plugin：动态显示或隐藏卷轴图像

本文介绍了jQuery Reel Plugin：动态显示或隐藏卷轴图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

原谅我的英语。

我尝试使用，它完美地运行在我的html文件中。 width =210height =186
class =reel
id =image1
data-images =fish / DSCN ####。JPG | 691 .. 702\" >

但是，如果我通过document.innerHTML

图像会显示出来，但我无法卷轴。

  document.getElementById（'Hello'）。innerHTML ='< img src =fish / DSCN0691.JPGwidth =210height =186class = reelid =image2data-images =fish / DSCN ####。JPG | 691..702>';

我也尝试了 element.setAttribute（name，value）函数，或使用jQuery加载整个html文件。但结果相同...

 
 
 不知道现在该做什么。
 
 
 非常感谢。
 
 
有没有其他解决方案可以动态显示和隐藏卷轴图像？ 这里是整个脚本和项目。 
 
 
  
 < script language =JavaScript> 
函数WriteToFile（passForm）{
 
 document.getElementById（'Hello'）。innerHTML ='< img src =fish / DSCN0691.JPGwidth =210height = 186class =reelid =image2data-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 =buttonvalue =submitonclick =WriteToFile（this）;> 
 
  class =reel
 id =image1
数据图像= 鱼/ DSCN #### JPG | 691..702。 > 
< / body> 
  
  
 
解决方案
卷轴插件在文档加载时使用卷轴类来初始化所有图像。如果之后更改HTML Dom，则需要初始化添加的图像。您可以通过以下JavaScript代替：
  $（'＃image'）。reel（{
 images ：'fish / DSCN ####。JPG | 691..702'
}）; 
  
 
Excuse my English.
I tried to use the jQuery Reel Plugin and it works perfectly on my html file.
 <img src="DSCN0691.jpg" width="210" height="186"
  class="reel"
  id="image1"
  data-images="fish/DSCN####.JPG|691..702">
But if I add the script through document.innerHTML, it doesn't work at all.
The image will show up, but I can't reel it.
document.getElementById('Hello').innerHTML='<img src="fish/DSCN0691.JPG" width="210" height="186" class="reel" id="image2" data-images="fish/DSCN####.JPG|691..702">';
I also tried the element.setAttribute(name, value) function, or loaded the whole html file using jQuery.But it turns out the same way...
Have no idea what to do now.
Or are there any other solution that I can show and hide the reel image dynamically ?
Thanks a lot.
Down here are the whole script and project.
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>
 解决方案 
The reel plugin is initializing all images with the class "reel" on document load. If you change the HTML Dom afterwards, you need to initialize the added image. You can do this by the following javascript instead:
$('#image').reel({
    images: 'fish/DSCN####.JPG|691..702'
});
                        
这篇关于jQuery Reel Plugin：动态显示或隐藏卷轴图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！