如何使用JSF製作圖像幻燈片？

Question

這可能嗎？如果答案是否定的，還有其他想法？

圖片列表是動態的，它取決於您正在查看的用戶。 如何使用用戶上傳的圖像製作幻燈片？

現在它的工作方式如下： 顯示一張圖片，您需要關閉它才能打開下一張。

<rich:dataGrid id="albumGrid" value="#{someBean.pictures}" var="item" columns="4" elements="4" width="450px" rendered="#{not empty someBean.pictures}" style="margin-left:20px;"> 

       <a4j:commandLink id="fullLinkProfile"> 
        <a4j:actionparam name="pic" value="#{item.path}" assignTo="#{picsBean.path}" /> 
        <h:graphicImage value="/home/pictures/user/#{item.path}" rendered="#{item.path != null}"/> 
       </a4j:commandLink> 
       <f:facet name="footer"> 
        <rich:datascroller for="albumGrid" boundaryControls="hide" stepControls="show" fastControls="hide" >      
        </rich:datascroller> 
       </f:facet>    

</rich:dataGrid> 

Answer 1

使用任何JavaScript幻燈片功能並將bean值參數傳遞給它有逗號（，）分離圖像路徑的值。

使用jQuery會給你最好的效果。

另請參閱this。

使用下面的函數創建您的html代碼傳遞bean值，然後與任何jQuery插件集成。

function loadImage(imgPaths) 
{ 
    var images = imgPaths; 
    var imgArr=images.split(","); 
    var ulobj=document.getElementById("parentDiv"); 
    var i; 
    var len =imagePath_array.length-1; 
    for(i=0;i<len;i++) 
    { 
     var imgObj=document.createElement("img"); 
     var liObj=document.createElement("li"); 
     imgObj.src=imgArr[i]; 
     liObj.appendChild(imgObj); 
     ulobj.appendChild(liObj); 
    } 
}