javascript 图片新闻3

来源：互联网发布：mac小游戏推荐编辑：程序博客网时间：2024/05/01 18:36

现在我们来用一种非flash方法通过动易系统自定义函数标签自制一个自定义函数标签（函数标签是带可选参数界面的，动态标签不带）实现非flash调用文章模块的带推荐图片+标题+内容（不能少于5篇）的幻灯效果。此标签可以在网站首页和文章模块模块首页调用，效果很漂亮，决不亚于flash幻灯，加载速度又快。下面大概讲讲这个标签的制作和调用

1、添加一个函数标签，取名比如文章标题内容幻灯（方法就不讲了，请参考动易系统动态标签基础知识（一））注意这里添加的是函数标签
2、sql查询，主表选中PE_Article，之后在弹出的字段里我们选中（按住ctrl键）（动易数据库字段解释）ArticleID,ChannelID,Title,Content,DefaultPicUrl，把select top 10改成select top 5，把Content,DefaultPicUrl的顺序调转，此时变成了select top 5 ArticleID,ChannelID,Title,DefaultPicUrl,Content from PE_Article
在后面打一个空格，复制以下语句粘贴；
where channelid={input(0)} and Deleted ={$PE_False} and Elite ={$PE_True} and Status =3 order by ArticleID desc
最后的效果是：
select top 5 ArticleID,ChannelID,Title,DefaultPicUrl,Content from PE_Article where channelid={input(0)} and Deleted ={$PE_False} and Elite ={$PE_True} and Status =3 order by ArticleID desc
注意：这里别想偷懒，一定要自己做，别想着把所有代码都复制粘贴，那样后果自负，嘿嘿
3、在参数说明哪添加七个参数
频道ID
图片宽度
图片高度
标题字数
内容字数
边框颜色
标题背景色
注意每添加一个参数后要回车
填上优先级数字（1－－9随便填）之后仔细检查无误后点下一步。

在标签内容里删除{Loop}{Infobegin}循环内容{Infoend}{/Loop}代码，把以下代码复制粘贴进去（千万别点最下的视图区）
<div style="width={input(1)};border:1px solid {input(5)};margin:1px; padding:1px;">
<div><a onClick="gotoshow()" onMouseOver="tu_ove()" onMouseOut="ou()" style="cursor:hand"><img src="{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/{$Field(3,Text,0,0,0)}" width={input(1)} height={input(2)} name="slide" border=0></a></div>
<div id=textslide align="center" style="width={input(1)};background:{input(6)}">{$Field(2,Text,{input(3)},1,0)}</div>
<div id=textcontent style=" padding:0 4px;text-indent:7px">{$Field(4,Text,{input(4)},2,0)}</div>
<table border=0 align="center" cellpadding=0 cellspacing=0>
    <tr valign=top>
      <td width="27"><div id="test0"><a style="cursor:hand" onclick="picstop(1)"><img src="/skin/img/dh_01.jpg" id="picss" border=0 /></a></div></td>
      <td width="27"><div id="test1"></div></td>
      <td width="27"><div id="test2"></div></td>
      <td width="27"><div id="test3"></div></td>
      <td width="27"><div id="test4"></div></td>
      <td width="27"><div id="test5"></div></td>
    </tr>
</table>
<script type="text/javascript">
<!--{Loop}
{Infobegin}
imgUrl{$AutoID}="{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/{$Field(3,Text,0,0,0)}"
imgLink{$AutoID}="{$Field(0,GetUrl,Article,1)}"
imgtext{$AutoID}="{$Field(2,Text,{input(3)},1,0)}"
imgcontent{$AutoID}="{$Field(4,Text,{input(4)},2,0)}"{Infoend}

{/Loop}
//slideimages数组为变换的图
var slideimages=new Array();
slideimages[0]=imgUrl1;
slideimages[1]=imgUrl2;
slideimages[2]=imgUrl3;
slideimages[3]=imgUrl4;
slideimages[4]=imgUrl5;

//slidetext数组为变换的标题文字
var slidetext=new Array();
slidetext[0]=imgtext1;
slidetext[1]=imgtext2;
slidetext[2]=imgtext3;
slidetext[3]=imgtext4;
slidetext[4]=imgtext5;

//textcontent数组为变换的说明文字
var textcontent=new Array();
textcontent[0]=imgcontent1;
textcontent[1]=imgcontent2;
textcontent[2]=imgcontent3;
textcontent[3]=imgcontent4;
textcontent[4]=imgcontent5;

//slidelinks数组为点击大图后跳到的地址
var slidelinks=new Array();
slidelinks[0]=imgLink1;
slidelinks[1]=imgLink2;
slidelinks[2]=imgLink3;
slidelinks[3]=imgLink4;
slidelinks[4]=imgLink5;

//图片初始内容－－start
var slidespeed=3000

var slidesanjiaobgimages=new Array("/skin/img/dh_1.jpg","/skin/img/dh_2.jpg","/skin/img/dh_3.jpg","/skin/img/dh_4.jpg","/skin/img/dh_5.jpg");
var slidesanjiaoimages=new Array("/skin/img/dh_11.jpg","/skin/img/dh_21.jpg","/skin/img/dh_31.jpg","/skin/img/dh_41.jpg","/skin/img/dh_51.jpg");
var slidesanjiaoimagesname=new Array("xiaosan1","xiaosan2","xiaosan3","xiaosan4","xiaosan5");

var filterArray=new Array();
filterArray[0]="progid:DXImageTransform.Microsoft.Slide(duration=2,bands=1,slideStyle=SWAP)";
filterArray[1]="progid:DXImageTransform.Microsoft.Stretch (duration=1,stretchStyle=PUSH)";
filterArray[2]="progid:DXImageTransform.Microsoft.Stretch(duration=1)";
filterArray[3]="progid:DXImageTransform.Microsoft.Slide(bands=8, duration=1)";
filterArray[4]="progid:DXImageTransform.Microsoft.Fade ( duration=1,overlap=0.25 )";

var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

<div align="center" style="width={input(1)};border:1px solid {input(4)}; margin:1px;padding:1px;">
<div><a onClick="gotoshow()" onMouseOver="tu_ove()" onMouseOut="ou()" style="cursor:hand"><img src="{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/{$Field(3,Text,0,0,0)}" width={input(1)} height={input(2)} name="slide" border=0></a></div>
<div id=textslide style="width={input(1)};margin-top:1px; margin-bottom:1px;background:{input(5)}">{$Field(2,Text,{input(3)},1,0)}</div>
<table border=0 cellpadding=0 cellspacing=0>
    <tr valign=top>
      <td width="27"><div id="test0"><a style="cursor:hand" onclick="picstop(1)"><img src="/skin/img/dh_01.jpg" id="picss" border=0 /></a></div></td>
      <td width="27"><div id="test1"></div></td>
      <td width="27"><div id="test2"></div></td>
      <td width="27"><div id="test3"></div></td>
      <td width="27"><div id="test4"></div></td>
      <td width="27"><div id="test5"></div></td>
    </tr>
</table>
<script type="text/javascript">
<!--{Loop}
{Infobegin}
imgUrl{$AutoID}="{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/{$Field(3,Text,0,0,0)}"
imgLink{$AutoID}="{$Field(0,GetUrl,Article,1)}"
imgtext{$AutoID}="{$Field(2,Text,{input(3)},1,0)}"
{Infoend}
{/Loop}
//slideimages数组为变换的图
var slideimages=new Array();
slideimages[0]=imgUrl1;
slideimages[1]=imgUrl2;
slideimages[2]=imgUrl3;
slideimages[3]=imgUrl4;
slideimages[4]=imgUrl5;

//slidetext数组为变换的标题文字
var slidetext=new Array();
slidetext[0]=imgtext1;
slidetext[1]=imgtext2;
slidetext[2]=imgtext3;
slidetext[3]=imgtext4;
slidetext[4]=imgtext5;

//slidelinks数组为点击大图后跳到的地址
var slidelinks=new Array();
slidelinks[0]=imgLink1;
slidelinks[1]=imgLink2;
slidelinks[2]=imgLink3;
slidelinks[3]=imgLink4;
slidelinks[4]=imgLink5;

//图片初始内容－－start
var slidespeed=3000