Question

我在JSF应用程序中遵循以下代码

<t:dataList id="slider-one" value="#{MyBean.banners}" var="ofr" layout="simple" first="0" rows="10" dir="LTR">
<img src="demo/4.jpg" alt="picture" />
</t:dataList>

在执行时生成以下代码：

<span id="slider-one" style="display:inline">
<img src="demo/4.jpg" alt="picture" />                                            
<img src="demo/4.jpg" alt="picture" />
</span>

我正在使用JQuery来滑动这些在Chrome＆amp; Mozilla但在IE中失败了。有没有人对此有任何建议？

Answer 1

假设我正确理解了您的问题，您正在尝试创建某种形式的图像滑块。在这种情况下，您应该使用ul并将每个单独的图像列为li元素，因为span不应该用于容纳您尝试执行的多个元素。然后在div周围ul包裹overflow: hidden;并设置特定宽度，以便一次只显示一个图片。 div将充当查看其中图像的窗口。然后，您将根据所需的方向向左或向右滑动ul内的div。

如果我误解了你的问题，那么我道歉。

Answer 2

当您将<t:dataList layout="simple">与需要的任何属性一起发布到HTML中时，如id="slider-one"，那么它将呈现包含<span>元素的内容那个属性。

正如RobB所回答的那样，您宁愿使用包含块元素而不是像<ul>那样使用<li>内的每个图像。要使用Tomahawk's <t:dataList>实现此目标，您需要将layout属性设置为unorderedList，如下所示：

<t:dataList id="slider-one" value="#{MyBean.banners}" var="ofr" layout="unorderedList" first="0" rows="10" dir="LTR">
    <h:graphicImage value="#{ofr}" alt="picture" />
</t:dataList>

（请注意，除了我之外，为什么您使用<img>使用固定src，它只显示所有相同的图像，不应该使用{{1}引用我假设的<h:graphicImage>表示图像的URL？）

这将生成如下HTML：

#{ofr}

大多数（如果不是全部）jQuery滑块插件/示例也基于由<ul id="slider-one"> <li><img src="demo/1.jpg" alt="picture" /></li> <li><img src="demo/2.jpg" alt="picture" /></li> <li><img src="demo/3.jpg" alt="picture" /></li> ... </ul>标记的图像列表。

<span>中的<img/>因IE而失败但在Chrome＆amp; Mozilla浏览器</跨度>

2 个答案: