| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1052 人关注过本帖
标题:动态幻灯片效果
只看楼主 加入收藏
kobe412
Rank: 1
来 自:网络的另一边
等 级:新手上路
威 望:1
帖 子:322
专家分:0
注 册:2006-6-12
收藏
 问题点数:0 回复次数:2 
动态幻灯片效果

动态幻灯片效果,我们通常能通过查看源代码文件看到这种效果的代码,一种javascript的代码,能否将图片和图片的连接地址用动态的程序来操作.
首先呢,要书写asp代码片段,范例如下
<%
set rs = server.CreateObject ("adodb.recordset")
sql = "select top 3 * from picnews where ifshow=1"
rs.open sql,conn,1,1

pic1=rs("imgurl")
link1=rs("piclink")
rs.movenext

pic2=rs("imgurl")
link2=rs("piclink")
rs.movenext

link3=rs("picurl")
pic3=rs("imglink")
rs.close
set rs=nothing
%>

该代码片段的作用是用来定义三张图片和三个片对应的连接,比较简单

然后书写javascript代码片段,把三个图片的地址和连接目标用以上的三个变量分别替换出来

<script language=JavaScript>
var imgUrl=new Array();
var imgLink=new Array();
var adNum=0;
imgUrl[1]="<%=pic1%>";
imgLink[1]="<%=link1%>";
imgUrl[2]="<%=pic2%>";
imgLink[2]="<%=link2%>";
imgUrl[3]="<%=pic3%>";
imgLink[3]="<%=link3%>";
var imgPre=new Array();
var j=0;
for (i=1;i<=3;i++) {
if( (imgUrl[i]!="") && (imgLink[i]!="") ) {
j++;
} else {
break;
}
}
function playTran(){
if (document.all){
document.imgInit.filters[0].play();
}
}
function nextAd(){
if(adNum<j)adNum++ ;
else adNum=1;
if (document.all){
document.imgInit.filters[0].Transition=26;
document.imgInit.filters[0].apply();
}
document.images.imgInit.src="/imgUrl[adNum]";
playTran();
theTimer=setTimeout("nextAd()", 4000); //两秒周期 循环调用本身( nextAd() )
}
function goUrl(){
jumpUrl=imgLink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '') //相当于a标签的target属性,如果有指定则新开窗口
window.open(jumpUrl,jumpTarget);
else //没有指定target属性则在本窗口打开
location.href="/jumpUrl";
}
}
</script>

最后一步,就是在需要的位置来调用这个图片效果了

<a href="javascript:goUrl()"><img style="border: 1 solid #000000; padding: 1;FILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=1,transition=3);
; border-color:#000000;color:#000000;margin-bottom:0px" src="javascript:nextAd()" width="156" height="190" border=0 name=imgInit>

这样,一个动态幻灯片效果就被做出来了!

搜索更多相关主题的帖子: 动态幻灯片 源代码 效果 imgurl 
2007-05-17 15:20
yms123
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:209
帖 子:12488
专家分:19042
注 册:2004-7-17
收藏
得分:0 

这个可以用数组和自定义对象来代替赋值。
首先可以用Javascript定义一个图片对象
<script language=JavaScript>
function ImgCls()
{
this.Url="";
this.Link="";
}
</script>
然后服务器端代码可以循环一个Javascript数组出来,数组的元素是自定义的图片对象
<script language="javascript">
<%
set rs = server.CreateObject ("adodb.recordset")
sql = "select top 3 * from picnews where ifshow=1"
rs.open sql,conn,1,1
With Response
.Write "var ImgAry=new Array();"
Dim Im
Im=0
Do Until rs.EOF
.Write "ImgAry["&CStr(Im)&"]=new ImgCls();"
.Write "ImgAry["&CStr(Im)&"].Url='"&rs("imgurl")&"';"
.Write "ImgAry["&CStr(Im)&"].Link='"&rs("piclink")&"';"
Im=Im+1
rs.movenext
Loop
End With
rs.close
set rs=nothing
%>
</script>

2007-05-17 17:28
yms123
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:209
帖 子:12488
专家分:19042
注 册:2004-7-17
收藏
得分:0 
修改后的客户端代码,把我上面写的代码一起放在一个网页里就可以使用。
注意:我写的这个代码是有顺序的,第一段代码必须放置在网页最前头的位置,第二段在第一段下面,最后一段在第二段代码的下面。
<script language=JavaScript>
var adNum=0;
var imgPre=new Array();
var j=0;
for (i=1;i<ImgAry.length;i++) {
if( (imgAry[i].Url!="") && (ImgAry[i].Link!="") ) {
j++;
} else {
break;
}
}
function playTran(){
if (document.all){
document.imgInit.filters[0].play();
}
}
function nextAd(){
if(adNum<j)adNum++ ;
else adNum=1;
if (document.all){
document.imgInit.filters[0].Transition=26;
document.imgInit.filters[0].apply();
}
document.images.imgInit.src="/"+ImgAry[adNum].Url;
playTran();
theTimer=setTimeout("nextAd()", 4000); //两秒周期 循环调用本身( nextAd() )
}
function goUrl(){
jumpUrl=ImgAry[adNum].Link;
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '') //相当于a标签的target属性,如果有指定则新开窗口
window.open(jumpUrl,jumpTarget);
else //没有指定target属性则在本窗口打开
location.href="/jumpUrl";
}
}
</script>
2007-05-17 17:34
快速回复:动态幻灯片效果
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.014081 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved