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

最新推荐文章于 2020-04-27 12:07:28 发布

iteye_7943

最新推荐文章于 2020-04-27 12:07:28 发布

阅读量135

点赞数

分类专栏：脚本界面文章标签： JavaScript XML JSP CSS Flash ViewUI

脚本界面专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在做网站的时候,很多客户要求首页的信息要丰富.在这样的要求下,首页的布局就显得丰富重要.现在一般的网站都是由图片或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&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&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() < ($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) > $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) < $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就可以呈现出来

iteye_7943

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用xslt与javascript实现网页中图片的动态变化效果

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

扫一扫