XSLT Div间隔N行包裹数据

在使用sharepoint 2010 xml Webapart构建滚动图片遇到的需求

需求：每间隔N行用div包裹<img>,

解决方案：使用两次<xsl:for-each>，先获取每个间隔的起始和结束标号，再调用<xsl:template>循环获取的<img>段

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="XSLTFile2.xslt"?><sildes>
<img  url="201012/2010120714503156s.jpg" id="116"></img>
<img  url="201012/2010120714503156s.jpg" id="116"></img>
<img  url="201012/2010120714530883s.jpg" id="117"></img>
<img  url="201012/2010120714530883s.jpg" id="117"></img>
<img  url="201012/2010120715105950s.jpg" id="119"></img>
<img  url="201012/2010120715105950s.jpg" id="119"></img> 
<img  url="201012/2010120715292669s.jpg" id="121"></img>
<img  url="201012/2010120715292669s.jpg" id="121"></img>
<img  url="201012/2010120715303075s.jpg" id="122"></img>
<img  url="201012/2010120715303075s.jpg" id="122"></img>
<img  url="201012/2010120714503156s.jpg" id="116"></img>
<img  url="201012/2010120714503156s.jpg" id="116"></img>
<img  url="201012/2010120714530883s.jpg" id="117"></img>
<img  url="201012/2010120714530883s.jpg" id="117"></img>
<img  url="201012/2010120715105950s.jpg" id="119"></img>
<img  url="201012/2010120715105950s.jpg" id="119"></img>
<img  url="201012/2010120715292669s.jpg" id="121"></img>
<img  url="201012/2010120715292669s.jpg" id="121"></img>
<img  url="201012/2010120715303075s.jpg" id="122"></img>
<img  url="201012/2010120715303075s.jpg" id="122"></img>
</sildes>

 

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0 " xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <!--   下面的三个变量可以由XML中取得，做为例子，这里直接定义了初始值   -->
    <!--<xsl:variable   name= "varEnd"   select= "35 "/>-->
    <!--   定义循环步长   -->

    <xsl:variable name="varStep" select="3"/>
    <xsl:variable name="varSum" select="count(/sildes/img)"/>
    <xsl:template  name="pic" match="/">
        <div id="slides" style="position: relative; overflow-x: hidden; overflow-y: hidden; ">
            <xsl:for-each select="/sildes/img">
                <xsl:if test="position() mod $varStep =0">
                    <!--   定义初始值   -->
                    <xsl:variable name="varStart">
                        <xsl:choose>
                            <!--如果div里不满-->
                            <xsl:when test="position()&gt;($varSum - $varStep)">
                                <xsl:value-of select="$varSum - $varStep"/>
                            </xsl:when>
                            <xsl:otherwise>
                                <xsl:value-of select="position()"/>
                            </xsl:otherwise>
                        </xsl:choose>
                    </xsl:variable>
                    <!--   定义结束值   -->
                    <xsl:variable name="varEnd">
                        <xsl:value-of select="position()+$varStep"/>
                    </xsl:variable>
                    <!--<xsl:value-of select="$varStart"/>-->

                    <xsl:call-template name="MyLoopFun">
                        <xsl:with-param name="varStart" select="$varStart"/>
                        <xsl:with-param name="varEnd" select="$varEnd"/>
                    </xsl:call-template>
                </xsl:if>
            </xsl:for-each>
        </div>
    </xsl:template>
    <xsl:template name="MyLoopFun">
        <xsl:param name="varStart"/>
        <xsl:param name="varEnd"/>
        <div class="slide" style="visibility: visible;  opacity: 1; width: 600px; height: 60px; z-index: 5; top: 0px; left: -600px;  " id="">

            <xsl:for-each select="/sildes/img[position()&gt;= $varStart and position() &lt;= $varEnd]">
                <!--<xsl:if test="">-->
                <a title="G? til webdesign referencer">
                    <img style="width:100px;height:50px">
                        <xsl:attribute name="src">
                            http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/<xsl:value-of select="@url"/>
                        </xsl:attribute>
                    </img>
                </a>
                <!--<xsl:value-of select="position()"/>-->
                <!--</xsl:if>-->
            </xsl:for-each>

        </div>

    </xsl:template>
</xsl:stylesheet>

 

效果：

<div id="slides" style="position: relative; overflow-x: hidden; overflow-y: hidden;">
    <div class="slide" style="visibility: visible; opacity: 1; width: 600px; height: 60px;
        z-index: 5; top: 0px; left: -600px;" id="">
        <a title="G? til webdesign referencer">
            <img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120714530883s.jpg" /></a><a
                title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120714530883s.jpg" /></a><a
                    title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715105950s.jpg" /></a><a
                        title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715105950s.jpg" /></a></div>
    <div class="slide" style="visibility: visible; opacity: 1; width: 600px; height: 60px;
        z-index: 5; top: 0px; left: -600px;" id="">
        <a title="G? til webdesign referencer">
            <img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715105950s.jpg" /></a><a
                title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715292669s.jpg" /></a><a
                    title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715292669s.jpg" /></a><a
                        title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715303075s.jpg" /></a></div>
    <div class="slide" style="visibility: visible; opacity: 1; width: 600px; height: 60px;
        z-index: 5; top: 0px; left: -600px;" id="">
        <a title="G? til webdesign referencer">
            <img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715303075s.jpg" /></a><a
                title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715303075s.jpg" /></a><a
                    title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120714503156s.jpg" /></a><a
                        title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120714503156s.jpg" /></a></div>
    <div class="slide" style="visibility: visible; opacity: 1; width: 600px; height: 60px;
        z-index: 5; top: 0px; left: -600px;" id="">
        <a title="G? til webdesign referencer">
            <img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120714503156s.jpg" /></a><a
                title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120714530883s.jpg" /></a><a
                    title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120714530883s.jpg" /></a><a
                        title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715105950s.jpg" /></a></div>
    <div class="slide" style="visibility: visible; opacity: 1; width: 600px; height: 60px;
        z-index: 5; top: 0px; left: -600px;" id="">
        <a title="G? til webdesign referencer">
            <img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715105950s.jpg" /></a><a
                title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715105950s.jpg" /></a><a
                    title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715292669s.jpg" /></a><a
                        title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715292669s.jpg" /></a></div>
    <div class="slide" style="visibility: visible; opacity: 1; width: 600px; height: 60px;
        z-index: 5; top: 0px; left: -600px;" id="">
        <a title="G? til webdesign referencer">
            <img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715292669s.jpg" /></a><a
                title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715292669s.jpg" /></a><a
                    title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715303075s.jpg" /></a><a
                        title="G? til webdesign referencer"><img style="width: 100px; height: 50px" src="http://gascms.gas.zhenergy.com.cn/DingWen/Photo/UploadPhotos/201012/2010120715303075s.jpg" /></a></div>
</div>