如何使用 JSF 制作图像幻灯片？答案

【问题标题】：How to make an image slideshow with JSF?如何使用 JSF 制作图像幻灯片？
【发布时间】：2011-07-02 21:07:45
【问题描述】：

有可能吗？如果答案是否定的，还有其他想法吗？

图片列表是动态的，这取决于您正在查看的用户。如何使用用户上传的图像制作幻灯片？

现在它是这样工作的：显示单张图片，您需要将其关闭才能打开下一张。

<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>

【问题讨论】：

标签： java jsf slideshow

【解决方案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);
    }
}

【讨论】：