Question

我有两个xml页面，其中一个（Slide.xml）包含有关滑块图像的信息，我想使用xslt将这些图像显示为jquery滑块。我所要做的就是显示滑块，但图像不会显示。请帮帮我 Slide.xml：

<?xml version="1.0" encoding="UTF-8"?>
<slide>
    <image>nemo.jpg</image>
    <image>up.jpg</image>
    <image>walle.jpg</image>
</slide>

INDEX.XML：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="Pub.xsl"?>
<liste>
    <page name="Pub.xml" ></page>
    <page name="Slide.xml" ></page>
</liste>

xslt文件：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema" exclude-result-prefixes="xs" version="2.0">
    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title>TEST</title>
                <!-- slider -->
                <link rel="stylesheet" href="Nivo-Slider/nivo-slider.css" type="text/css"/>
                <link rel="stylesheet" href="Nivo-Slider/themes/default/default.css"
                    type="text/css"/>
                <script src="Nivo-Slider/jquery-1.11.3.js" type="text/javascript"/>
                <script src="Nivo-Slider/jquery.nivo.slider.pack.js" type="text/javascript"/>
                <!--slider-->
                <link rel="stylesheet" href="main.css" type="text/css"/>
            </head>

            <body>
                <div class="content">
                    <div id="header">
                        <h1>Hello</h1>
                        <div id="nav">
                            <ul>
                                <li>
                                    <a href="#">Accueil</a>
                                </li>
                                <li>
                                    <a href="#">Contact</a>
                                </li>
                                <li>
                                    <a href="#">A propos</a>
                                </li>
                            </ul>
                        </div>
                        <div style="clear: both"> </div>
                        <div id="searchBox">
                            <form action="#">
                                <input type="text" class="box"/>
                                <input type="submit" class="button" value="Rechercher"/>
                            </form>
                        </div>
                    </div>
                    <div class="slider-wrapper theme-default">
                        <div id="slider" class="nivoSlider">
                            <xsl:for-each select="document('Slide.xml')/slide/image">
                                <img src="{image}" alt="aa"/>
                            </xsl:for-each>
                        </div>
                    </div>
                    <div id="htmlcaption" class="nivo-html-caption">
                        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
                    <script type="text/javascript">
                    $(window).load(function() {
                    $('#slider').nivoSlider();
                    });
                </script>
                </div>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Answer 1

在for-each内，您只需使用<img src="{.}" alt="aa"/>输出上下文节点的字符串值。您的尝试<img src="{image}" alt="aa"/>会查找上下文节点的image子项。

使用xslt显示jquery图像滑块

1 个答案: