文章/答案/技术大牛

发布

社区首页 >问答首页 >使用xslt显示jquery图像滑块

问使用xslt显示jquery图像滑块
EN

Stack Overflow用户

提问于 2015-11-05 11:48:22

回答 1查看 528关注 0票数 0

我有两个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>

jquery

xml

xslt

slider

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-05 11:52:43

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33543782

复制

相似问题

问使用xslt显示jquery图像滑块
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用xslt显示jquery图像滑块EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用xslt显示jquery图像滑块
EN