`
songhongchen
  • 浏览: 122765 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

用xslt与javascript实现网页中图片的动态变化效果

JavaScriptXMLJSPCSSFlash 
阅读更多
在做网站的时候,很多客户要求首页的信息要丰富.在这样的要求下,首页的布局就显得丰富重要.现在一般的网站都是由图片或flash与文字组成,当图片的数量很多,而又不能全站放到首页的时候,就需要在固定的地方让图片循环显示.由于我现在做的网站中,信息都是存放在xml文件中,所以使用xslt 来显示信息是一个最好的选择.由于在xslt中加入角本,java编译总是不能通过,所以把角本单独放到一个.js文件中,在xslt中外部引用这个js 文件.

下面是xml文件的大概内容: 

<ContentIndex ContentGUID="20060627044900" ConteItemGUID="6a4a6d0e-96d0-47cc-9120-142fee97e59b" ContentItemName="综合新闻">
  <Item ItemID="1036886645" ModuleID="6a4a6d0e-96d0-47cc-9120-142fee97e59b">
    <ItemPath>/Data/ItemXml/2006-7/6a4a6d0e-96d0-47cc-9120-142fee97e59b/1036886645.xml</ItemPath>
    <TITLE>1－2月我省房地产投资资金来源依然紧张 构成发生变化</TITLE>
    <SUBTITLE>
    </SUBTITLE>
    <SUBTYPE>0</SUBTYPE>
    <SEQUENCE>0</SEQUENCE>
    <CLICKCOUNT>6</CLICKCOUNT>
    <AUTHOR>
    </AUTHOR>
    <MARK>0</MARK>
    <MARKDAY>3</MARKDAY>
    <TIP>0</TIP>
    <PUBLISHSTARTDATE>2006-3-20 00:00:00</PUBLISHSTARTDATE>
    <PUBLISHENDDATE>9999-12-31 23:59:59</PUBLISHENDDATE>
    <FOREVERPUBLISH>1</FOREVERPUBLISH>
    <CREATEDATE>2006-7-7 16:24:22</CREATEDATE>
    <CREATEUSERNAME>
    </CREATEUSERNAME>
    <DEPARTMENTNAME>
    </DEPARTMENTNAME>
    <SmallImageList>
      <Image FileID="8312c370-57f5-4a25-8466-53cb7bc07f6a" ExtName="gif" FileName="ny_xcjy" FilePath="http://localhost/asf//1.gif" />
    </SmallImageList>
  </Item>
  <Item ItemID="1036886646" ModuleID="6a4a6d0e-96d0-47cc-9120-142fee97e59b">
    <ItemPath>/Data/ItemXml/2006-7/6a4a6d0e-96d0-47cc-9120-142fee97e59b/1036886646.xml</ItemPath>
    <TITLE>1－2月我省工业投资增长平稳</TITLE>
    <SUBTITLE>
    </SUBTITLE>
    <SUBTYPE>0</SUBTYPE>
    <SEQUENCE>0</SEQUENCE>
    <CLICKCOUNT>0</CLICKCOUNT>
    <AUTHOR>
    </AUTHOR>
    <MARK>0</MARK>
    <MARKDAY>3</MARKDAY>
    <TIP>0</TIP>
    <PUBLISHSTARTDATE>2006-3-20 00:00:00</PUBLISHSTARTDATE>
    <PUBLISHENDDATE>9999-12-31 23:59:59</PUBLISHENDDATE>
    <FOREVERPUBLISH>1</FOREVERPUBLISH>
    <CREATEDATE>2006-7-7 16:24:22</CREATEDATE>
    <CREATEUSERNAME>
    </CREATEUSERNAME>
    <DEPARTMENTNAME>
    </DEPARTMENTNAME>
    <SmallImageList>
      <Image FileID="8312c370-57f5-4a25-8466-53cb7bc07f6a" ExtName="gif" FileName="ny_xcjy" FilePath="http://localhost/asf//2.gif" />
    </SmallImageList>
  </Item>
  <Item ItemID="1036886623" ModuleID="6a4a6d0e-96d0-47cc-9120-142fee97e59b">
    <ItemPath>/Data/ItemXml/2006-7/6a4a6d0e-96d0-47cc-9120-142fee97e59b/1036886623.xml</ItemPath>
    <TITLE>台州引导工商资本投入农机社会化服务解决农田抛荒问题</TITLE>
    <SUBTITLE>
    </SUBTITLE>
    <SUBTYPE>0</SUBTYPE>
    <SEQUENCE>0</SEQUENCE>
    <CLICKCOUNT>0</CLICKCOUNT>
    <AUTHOR>
    </AUTHOR>
    <MARK>0</MARK>
    <MARKDAY>3</MARKDAY>
    <TIP>0</TIP>
    <PUBLISHSTARTDATE>2006-3-17 00:00:00</PUBLISHSTARTDATE>
    <PUBLISHENDDATE>9999-12-31 23:59:59</PUBLISHENDDATE>
    <FOREVERPUBLISH>1</FOREVERPUBLISH>
    <CREATEDATE>2006-7-7 16:24:22</CREATEDATE>
    <CREATEUSERNAME>
    </CREATEUSERNAME>
    <DEPARTMENTNAME>
    </DEPARTMENTNAME>
   <SmallImageList>
      <Image FileID="8312c370-57f5-4a25-8466-53cb7bc07f6a" ExtName="gif" FileName="ny_xcjy" FilePath="http://localhost/asf//3.gif" />
    </SmallImageList>
  </Item>
   </ContentIndex>




xslt 文件内容: 

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:user="http://mycompany.com/mynamespace">
 <!--参数设置 End-->
 <xsl:template match="/">
  <xsl:variable name="sCurrDate">
  </xsl:variable>
  <xsl:variable name="TitleLength">22</xsl:variable>
  <xsl:variable name="ListItemNum">7</xsl:variable>
  <xsl:variable name="CssPath">./DesktopModules/ContentShow/Skin/Default/Xslt/BoxViewXslt/IntegratedNews.css</xsl:variable>
  <xsl:variable name="CssHead">IntegratedNews</xsl:variable>
  <xsl:variable name="TitleUrlHead">DesktopDefault.jsp?tabid=f2903f09-44ea-40e2-80f8-3a9de60c0d0e&amp;ID=</xsl:variable>
  <xsl:variable name="MoreUrl">DesktopDefault.jsp?tabid=c15da6c1-a667-410b-b517-5fdc017d504c</xsl:variable>
  <xsl:variable name="url">DesktopDefault.jsp?tabid=f2903f09-44ea-40e2-80f8-3a9de60c0d0e&amp;ID=</xsl:variable>
  <LINK rel="stylesheet" type="text/css" href="{$CssPath}"/>
  <table border="0" cellpadding="0" cellspacing="0" width="576" align="center">
   <tr>
    <td valign="Top" width="100%">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
       <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
          <td background="images/indexpage/IntegratedNews_Top_BG.gif">
           <img src="images/IndexPage/IntegratedNews_TopPic.gif" width="159" height="27" alt="综合新闻" border="0"/>
          </td>
          <td background="images/indexpage/IntegratedNews_Top_BG.gif" align="right" height="27">
           <a href="{$MoreUrl}" class="{$CssHead}_MoreLink">更多>>
          </a>
           <img src="images/spacer.gif" width="5"/>
          </td>
         </tr>
        </table>
       </td>
      </tr>
      <tr>
       <!--中间内容begin-->
       <td>
        <table border="0" cellspacing="0" cellpadding="0" width="100%">
         <tr>
          <td width="225" valign="top" align="center">
           <!--左边新闻图片begin-->
           <table height="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
             <td height="7px"/>
            </tr>
            <tr>
             <td align="center" valign="middle" height="103px">
              <xsl:variable name="FilePath"><xsl:for-each select="ContentIndex/Item/SmallImageList/Image">
<xsl:value-of select="@FilePath"/>,</xsl:for-each></xsl:variable>
              <script src="aaa.js" language="javascript">sss</script>
              <div id="elady1_divimg" style="position:relative">
               <a onMouseOver="elady1_listMsg();return document.returnValue" href="javascript:elady1_linkurl()" target="_self">
                <img style="FILTER: revealTrans(duration=2,transition=20)" src="javascript:elady1_nextAd('{$FilePath}')" border="0" name="e_tprotator"/>
               </a>
              </div>
             </td>
            </tr>
           </table>
           <!--左边新闻图片begin-->
          </td>
          <td valign="top" height="110px" bgcolor="#FFFFFF">
           <table border="0" cellspacing="0" cellpadding="0" width="100%">
            <xsl:for-each select="ContentIndex/Item">
             <xsl:sort select="TIP" data-type="number" order="descending"/>
             <xsl:sort select="SEQUENCE" data-type="number" order="ascending"/>
             <xsl:if test="position() &lt; ($ListItemNum + 1)">
              <xsl:variable name="CreateDate">
               <xsl:value-of select="CREATEDATE"/>
              </xsl:variable>
              <xsl:variable name="PublishStartDate">
               <xsl:value-of select="PUBLISHSTARTDATE"/>
              </xsl:variable>
              <xsl:variable name="PublishEndDate">
               <xsl:value-of select="PUBLISHENDDATE"/>
              </xsl:variable>
              <xsl:variable name="Title">
               <xsl:value-of select="TITLE"/>
              </xsl:variable>
              <xsl:variable name="sUrl">
              </xsl:variable>
              <xsl:if test="string-length(TITLE) &gt; $TitleLength">
               <tr>
                <td width="15px" align="center" height="25" background="images/indexpage/List_Content_Point.gif">
                 <img src="images/IndexPage/dian.gif" border="0" align="absmiddle"/>
                </td>
                <td background="images/indexpage/List_Content_Point.gif">
                 <a href="{$sUrl}" target="_blank" class="{$CssHead}_TitleLink" Title="{$Title}">
                  <xsl:value-of select="substring(TITLE,1,($TitleLength - 1))" disable-output-escaping="yes"/>
                 </a>...
                </td>
                <td width="50px">
                </td>
               </tr>
              </xsl:if>
              <xsl:if test="string-length(TITLE) &lt; $TitleLength+1">
               <tr>
                <td width="15px" align="center" height="25" background="images/indexpage/List_Content_Point.gif">
                 <img src="images/IndexPage/dian.gif" border="0" align="absmiddle"/>
                </td>
                <td background="images/indexpage/List_Content_Point.gif">
                 <a href="{$sUrl}" target="_blank" class="{$CssHead}_TitleLink" Title="{$Title}">
                  <xsl:value-of select="substring(TITLE,1,$TitleLength)" disable-output-escaping="yes"/>
                 </a>
                </td>
                <td width="50px">
                </td>
               </tr>
              </xsl:if>
             </xsl:if>
            </xsl:for-each>
           </table>
          </td>
         </tr>
        </table>
       </td>
       <!--中间内容end-->
      </tr>
     </table>
    </td>
   </tr>
   <tr>
    <td height="3"/>
   </tr>
  </table>
 </xsl:template>
</xsl:stylesheet>






js文件内容: 



var elady_step=3;

var elady_speed=50;

var e_tp=new Array();

var e_tplink=new Array();

var adNum_elady1=0;

var elady_stop_sh=0;

var elady_star_sh=1;

function elady1_moveImg(){

if ((!document.all&&!document.getElementById)||(elady_stop_sh==0)) return;

if (document.all.elady_star_sh==1){

document.all.elady1_divimg.style.pixelTop=parseInt(document.all.elady1_divimg.style.pixelTop)+elady_step;}

else if (document.all.elady_star_sh==2){

document.all.elady1_divimg.style.pixelLeft=parseInt(document.all.elady1_divimg.style.pixelLeft)+elady_step;}

else if (document.all.elady_star_sh==3){

document.all.elady1_divimg.style.pixelTop=parseInt(document.all.elady1_divimg.style.pixelTop)-elady_step;}

else{

document.all.elady1_divimg.style.pixelLeft=parseInt(document.all.elady1_divimg.style.pixelLeft)-elady_step;}

if (elady_star_sh<4) elady_star_sh++;

else elady_star_sh=1;

setTimeout("elady1_moveImg()",elady_speed);}

e_tplink[0]="";

 

var currentimage=new Array();

for (i=0;i<=3;i++){currentimage[i]=new Image();

 currentimage[i].src=e_tp[i];

  }

  function elady1_set(){   if (document.all)

  {   document.all.e_tprotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);

   document.all.e_tprotator.filters.revealTrans.apply();   }

   }

   function elady1_playCo()
   {   if (document.all)      document.all.e_tprotator.filters.revealTrans.play()

   }
var filepath;
var filepaths = new Array();

function elady1_nextAd(ab)
{
if(ab!=null)
 filepath=ab;
if(adNum_elady1<e_tp.length-1)
adNum_elady1++ ;

     
else adNum_elady1=0;

      
elady1_set();
filepaths = filepath.split(",");

for(i=0;i<filepaths.length-1;i++)
{
 e_tp[i]=filepaths[i];
}
 
document.images.e_tprotator.src=e_tp[adNum_elady1];

       
elady1_playCo();

        
theTimer=setTimeout("elady1_nextAd()", 4000);}

        
function elady1_linkurl(){   jumpUrl=e_tplink[adNum_elady1];

         
jumpTarget='_blank';

         
if (jumpUrl != '')
{     
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);

           
else location.href=jumpUrl;

            
}
}

function elady1_listMsg()

{   status=e_tplink[adNum_elady1];

document.returnValue = true;}




以上代码经过调试,只要在xml文件中加入引用xslt就可以呈现出来
1
顶
0
踩
分享到：
| 轻松34步使你的 SQL 语句完全优化
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    从 XSLT 样式表调用 JavaScript

    要使XSLT能够调用JavaScript，除了XSLT处理器（如Xalan）之外，还需要在CLASSPATH中包含js.jar文件，这是JavaScript的实现，以及bsf.jar文件，这是Xalan发行版的一部分。这些文件提供了必要的运行环境和接口，以便...

    javascript xml xsl xslt

    JavaScript、XML、XSL与XSLT是Web开发中四个重要的技术组件，它们在数据处理、页面动态化和跨平台信息交换中起着至关重要的作用。以下是对这些技术的详细解释： JavaScript，全称为ECMAScript，是一种广泛应用于...

    用javascript以xslt显示xml_demo

    在这个"用javascript以xslt显示xml_demo"的示例中，我们将探讨如何利用JavaScript来处理XML数据，并通过XSLT将其转换成易于在网页上展示的形式。 首先，理解XML和XSLT的基础概念是至关重要的。XML是一种结构化数据...

    XSL基础教程 从 XSLT 样式表调用 JavaScript

    在某些情况下，我们可能需要在XSLT转换过程中使用JavaScript，例如处理更复杂的逻辑、访问浏览器API或实现动态效果。XSLT提供了一种机制，即`&lt;xsl:script&gt;`元素，允许在样式表中嵌入JavaScript代码。然而，需要注意...

    一个利用xslt和ajax实现的树型导航

    【XSLT与AJAX实现的树型导航】 在网页设计和开发中，树型导航是一种常见的用户界面元素，它能有效地展示层级关系，帮助用户快速理解和浏览网站结构。本项目利用XSLT（可扩展样式表语言转换）和AJAX（异步JavaScript...

    用XML XSLT CSS JavaScript模式组建网站.pdf

    用XML XSLT CSS JavaScript模式组建网站

    SVG和XSLT实现统计图表源代码

    SVG（Scalable Vector Graphics）和XSLT（Extensible Stylesheet Language Transformations）是两种在Web开发中用于创建动态和交互式图形的技术。SVG是一种基于XML的矢量图形格式，能够描绘出清晰、可缩放的图形，而...

    XML$XSLT$HTML$JAVASCRIPT转换实例

    JavaScript是一种客户端脚本语言，广泛应用于网页开发，用于实现动态交互功能。它可以与HTML和CSS结合，改变网页内容、响应用户操作、执行异步通信（Ajax）等。在XML到HTML的转换中，JavaScript可以用于进一步处理...

    xslt经典教程—网页设计师必备

    **XSLT经典教程——网页设计师的必备...总结来说，XSLT是网页设计师的利器，它提供了一种强大而灵活的方式来处理XML数据，从而在网页设计中实现数据的动态展示和交互。熟练掌握XSLT，将使你在网页设计领域更具竞争力。

    xslt中调用java

    通过JAXP的Transformer接口，我们可以在XSLT转换过程中动态插入Java代码。首先，创建一个`javax.xml.transform.TransformerFactory`实例，然后使用`newTransformer()`方法加载XSLT样式表。在`Transformer`对象上设置...

    javaScript手册+css手册+Xslt

    JavaScript手册、CSS手册和XSLT手册是Web开发中的三本重要参考资料，涵盖了前端开发的主要技术。接下来，我将详细阐述这些技术的核心概念、应用场景以及关键知识点。 **JavaScript手册** JavaScript，一种轻量级的...

    ASP处理XSLT转换XML的实现

    在Web开发领域，特别是早期的网站构建中，ASP（Active Server Pages）作为一种动态网页技术被广泛应用于服务器端脚本环境。它能够生成并执行HTML页面、图片等文件，同时支持VBScript、JScript等多种脚本语言。在处理...

    采用XSLT+CSS+JQuery+WebService技术实现ajax体验综合网站发布系统源码例子

    `jquery-1.3.2-vsdoc2.js` 和 `jquery-1.3.2.js` 分别是JQuery的文档注解版和核心库文件，用于在网页中实现动态效果和异步请求。例如，JQuery可能被用来实现页面的无刷新加载、下拉菜单的动画效果或者表单验证等功能...

    xslt-processor：不带本机库依赖项JavaScript XSLT处理器 开发技术 - 其它.zip

    JavaScript中的XSLT处理器则是在浏览器环境中执行这些转换的工具，而`xslt-processor`是一个特殊的实现，它不依赖任何本机库，这使得它在Web应用中具有更高的可移植性和兼容性。 在JavaScript中处理XSLT转换时，...

    XSLT简单教程- XSLT的实例

    若浏览器不支持，也可以通过编写简单的JavaScript脚本来实现这一功能。 ### 结论 通过上述步骤，我们可以清晰地了解到XSLT是如何帮助我们灵活地转换XML文档并生成所需格式的文档。XSLT的强大之处在于它不仅限于...

    XSLT和HTML的帮助文档

    它描述了网页的结构，通过标签来定义文本、图片、链接等元素的展示方式。HTML5是当前广泛使用的版本，引入了许多新特性，如音频、视频、离线存储以及更好的图形处理能力。 **XSLT与HTML的关系** XSLT常用于将XML...

    Zero Server Controls technique in ASP.Net, C# (XML Insertion, JavaScript tricks using AJAX deletion and XSLT record display using JavaScript)

    在这个项目中，开发者可能创建了一个XML数据源，用C#处理数据的插入、删除等操作，并通过AJAX与客户端进行通信。同时，他们可能还编写了JavaScript代码和XSLT样式表，用于在用户界面上实时更新和展示数据。 总结...

    Javascript+Xslt解析Xml为Html的方法.pdf

    总结来说，JavaScript与XSLT结合使用可以实现XML数据的客户端转换，提供了一种灵活的方式在浏览器端处理和展示XML内容。这种方法在不需要服务器端额外处理的情况下，可以提高页面的响应速度和用户体验。然而，需要...

    xslt + xml 动态菜单

    在网页开发领域，动态菜单是不可或缺的一部分，它能够根据用户操作或者特定条件实时更新显示内容。本实例将探讨如何利用XSLT（Extensible Stylesheet Language Transformations）和XML（Extensible Markup Language...

Magicbox
Global site tag (gtag.js) - Google Analytics