欢迎你的访问
 
返回天空素材库首页 http://www.Skysucai.com  
收藏本站
将本站设为首页
您当前的位置:天空素材首页 -> 一种很酷的图片动态切换效果
 
栏 目 导 航
. 常用代码 . 综合特效
. 状态特效 . 游戏特效
. 页面背景 . 页面特效
. 页面导航 . 文本操作
. 文本特效 . 图形特效
. 鼠标特效 . 时间日期
. 密码特效 . 浏览相关
. 警告对话 . 技巧特效
. 计数转换 . 测试搜索
. 代码生成 . 播放音乐
. 按钮特效 . 系统相关
. 链接特效 . 黑客性质
. 相关特效 . 窗口特效
. 广告特效 . 表单表格
. 模拟例子
相 关 文 章
· 状态栏显示链接内容...
· 又一例闪动的标题栏...
· 让标题栏文字动起来...
· 状态栏显示链接内容...
· 在输入框中输入什么...
· 状态栏打字效果特效...
· 闪动的标题栏特效
· 字符来回出现于状态...
· 在标题栏显示时间特...
· 一款状态滚动的文字...
本 类 热 门
· 雷达效果
· 图片上链接的虚线框
· 禁止对图片用右键
· 图像过来
· 改变网页背景图片
· 飘动的图片
· 让IE6不出现图像工具栏...
· 图片默认的大小
· 图片震动
· 图片展示
· 一种很酷的图片动态切...
· 图片渐渐显示
更多  
 
 
更多  
最 新 推 荐
· 状态栏时间跳动特效
· 农历挂历特效
· 真正的万年历
· 网页特效 菜单-会动的...
· 网页特效 时间-任意位...
· 个人网页特效-有前后日...
· 时间每过一秒,Radio就...
· 时钟显示在任意指定位...
· 带开关的Form时钟
· 记录几天后的日期
· 显示登陆时间
· 退出时显示访问时间
更多  
     
一种很酷的图片动态切换效果
一种很酷的图片动态切换效果
作者:佚名  来源:本站整理  名称:一种很酷的图片动态切换效果 

减小字体 增大字体

       

[提示:你可先按照下面代码提示修改 上面部分代码,再按运行,此处看到的演示不完全正确]

此特效的详细完整代码如下:

看到这种图片切换的效果吗?用来切换旗帜广告将是个很好的选择。下面我们来讲一讲具体的做法:
第一步、把下面这段代码插入到页面的<head>与</head>之间:<script language=javascript>
isns = navigator.appName == "Netscape";
function ztstr(id,picurl,linkurl)
{
this.id=id
this.picurl=picurl
this.linkurl=linkurl
}zhuanti=new Array()
imgcount=1;
frequency=10*1000;//30秒//在这里修改图片的路径和链接
zhuanti[1]=new ztstr('1','http://www.windstudio.net/banner/banner1.gif','http://www.windstudio.net')
zhuanti[2]=new ztstr('2','http://www.windstudio.net/banner/banner2.gif','http://www.windstudio.net')
zhuanti[3]=new ztstr('3','http://www.windstudio.net/banner/banner3.gif','http://www.windstudio.net')
zhuanti[4]=new ztstr('4','http://www.windstudio.net/banner/banner4.gif','http://www.windstudio.net')

imgcount=zhuanti.length-1
for(i=1;i<=imgcount;i++)
{
eval("img"+i+"=new Image()")
eval("img"+i+".src=zhuanti["+i+"].picurl")
}

nn=1var rand1 = 0;
var useRand = 0;
function swapPic() {
var imgnum = zhuanti.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
// alert(useRand);
nn=useRand;
change_img();
}
function change_img()
{
eval('document.pic.src=img'+nn+'.src');
nn++;
if(nn>imgcount) nn=1
if(!isns)
{
pic.filters.item(0).apply()
pic.style.visibility='visible'
pic.filters.item(0).play()
setTimeout("pic.style.visibility='hidden'",frequency);
}
else
document.pic.visibility='visible'
tt=setTimeout('change_img()',frequency)
}
function pictarget()
{
tt=nn-1
if(tt<1) tt=imgcount
cururl=zhuanti[tt].linkurl
window.open(cururl);
}
function ini()
{
if(!isns)
{
spacewidth=Math.round((divmask.offsetWidth-770)/2)
dmwidth=770+spacewidth
dmheight=divmask.offsetHeight
totalstep=50
timeout=50
dmstepw=Math.round(770/totalstep)
dmsteph=Math.round(dmheight/totalstep)
setTimeout('hidimg()',3000)
}
else swapPic()
}
function hidimg()
{
dmwidth-=dmstepw
dmheight-=dmsteph
eval('divmask.style.clip="rect(0,'+dmwidth+','+dmheight+',0)"')
hdrun=setTimeout('hidimg()',timeout)
if(dmwidth<=spacewidth&&dmheight<=0)
{
divmask.style.visibility='hidden'
clearTimeout(hdrun)
swapPic()
}
}
</script>
第二步、调用定义好的JavaScript函数,在<body>里加上以下代码:<body onload=swapPic()>第三步、在页面中插入图片和链接:<a href=javascript:void(null) onclick='javascript:pictarget();return false;'>
<img src="http://www.windstudio.net/banner/banner1.gif" width=468 height=60 border=0 name=pic style="visibility:hidden;filter:revealtrans(duration=2.0,transition=12)"></a>好,到这里就大功告成了。另外,试试改变transition的数值,可以得到不同的转换效果哟~~

[返回上一页] [打印一种很酷的图片动态切换效果]
上一篇特效:图片渐渐显示
     
| 关于本站 | 服务条款 | 友情连接 | 网站地图 | 联系方式 | 广告联系 |