Question

我们有一个带有一堆图像的jquery cycle2幻灯片。我们对每个图像使用图像映射，并且XSLT脚本应该将所有图像及其图像映射添加到cycle2容器中。由于图像被输入到Umbraco中的节点中，并且它们中的每一个都包含正好1个图像和1个图像映射，并且XSLT脚本连续地加载它们，在for循环中节点后节点，然后输出应该在理论上如下所示：

<img src="img1.jpg" usemap="map1"/>
<map id="map1">
<area coords="xxx">
</map>

<img src="img2.jpg" usemap="map2"/>
<map id="map2">
<area coords="xxx">
</map>

<img src="img3.jpg" usemap="map3"/>
<map id="map3">
<area coords="xxx">
</map>

但是，循环容器的内容如下所示：

<img src="img1.jpg" usemap="map1"/>
<map id="map1">
<area coords="xxx">
</map>
<map id="map2">
<area coords="xxx">
</map>
<map id="map3">
<area coords="xxx">
</map>

<img src="img2.jpg" usemap="map2"/>
<img src="img3.jpg" usemap="map3"/>

此外，幻灯片中的图像不按照我们用于构建列表的umbraco节点的顺序排序。我们可以假设cycle2重新排列循环容器中的元素，但我在其页面上找不到有关如何管理幻灯片中图像顺序的任何文档。

我们如何确保幻灯片中的图像始终遵循我们将它们添加到幻灯片容器的HTML中的顺序？

我们的相关页面：http://www.dphtrading.com

Cycle2：http://jquery.malsup.com/cycle2/

Answer 1

使用此示例：http://jquery.malsup.com/cycle2/demo/non-image.php

将你的img和map标签包装在div中，如下所示：

enabledelayedexpansion

将QString st = QString ("QProgressBar::chunk {""background-color: #00B82E;""}"); st.append("QProgressBar {""border: 6px solid grey;" "border-radius: 9px;""text-align: center;""background: #00B82E;""}"); Progress->setStyleSheet(st);属性添加到循环幻灯片div中。

Example fiddle here

带有图像映射的图像的Jquery cycle2加载顺序

1 个答案: