对联 ·故事 ·史海钩沉 ·人物档案 ·地方风俗 ·谚语大全 ·讽刺与幽默 · 赚钱 · 法律 · 在线教研 · 会员中心 · 心理测试 · 魔鬼词典 · 顺口溜
 
主页特效 网页特效 百家姓
娱乐 歇后语 绕口令 脑筋急转弯
 
谚语 谜语 名言 邮政编码
便民 酒方 验方 偏方 站长工具  
 
算命 风俗 手相 爱情
女孩 音乐 面相 星座 血型
 
饮食 穴道 偏方 医药
生活 软件 硬件 解梦 高考



   JS特效



实用工具
便民服务 加密解密
 
魅力高密 民间故事 Flash教程 PS教程 最新国内新闻
新华字典 黄道吉日 英语园地  万年历 Html2anycode
  首页 | 美图 | 短信 | 安全 | 校园 | 网站 | 游戏 | UFO | 文秘 | 生活 | 信息技术 | 论文 | 人生 | 情感 | 日记
返回首页
当前位置: 主页 > 网站建设 >

【强烈推荐】仿flash的图片幻灯效果(无需使用

时间:2009-12-29 00:03来源:未知 作者:牧牛 点击:
仿flash的幻灯效果,是关于图片方面的特效,闪图效果: 代码如下:
  

该效果是 仿flash的图片幻灯效果(无需使用flash):

仿flash的幻灯效果,是关于图片方面的特效,闪图效果:

代码如下:

<div align=center style="width:250px;">
<SCRIPT language=JavaScript>
<!--
var widths=248;    //焦点图片宽
var w=2;
var widthss=widths+w;
var heights=170; //焦点图片高
var heightss=heightss+w;
var heightt=20;
var counts=7;      //总条数
//img1=new Image();在这里是声明了一个图片元素的对象
//后面是对图像的属性进行赋值或设置,如imgs.src="xxxx.jpg"是指定图片的索引地址.
//这个代码一般用于head区,用于预加载图片,即加快图片显示.
//只有用new Images()得到的图片IE7才认,
//而IE6和firefox可认得imgUrl[1]="/y9q9ms7lbgbt.jpg";得到的图片

img1=new Image();img1.src='/Article/UploadFiles/200903/20090322151106981.JPG';
url1=new Image();url1.src='/Article/zhuanjiahuicui/200903/Article_20090322150830_8.html';
txt1=new Image();txt1.txt='薛连德';

img2=new Image();img2.src='/Article/UploadFiles/200903/20090322151107415.JPG';
url2=new Image();url2.src='/Article/zhuanjiahuicui/200903/Article_20090322150830_8.html';
txt2=new Image();txt2.txt='呼培星';

img3=new Image();img3.src='/Article/UploadFiles/200903/20090322151107467.JPG';
url3=new Image();url3.src='/Article/zhuanjiahuicui/200903/Article_20090322150830_8.html';
txt3=new Image();txt3.txt='王待天老专家正在会诊';

img4=new Image();img4.src='/Article/UploadFiles/200903/20090322151106981.JPG';
url4=new Image();url4.src='/Article/zhuanjiahuicui/200903/Article_20090322150830_8.html';
txt4=new Image();txt4.txt='薛连德';

img5=new Image();img5.src='/Article/UploadFiles/200903/20090322151107415.JPG';
url5=new Image();url5.src='/Article/zhuanjiahuicui/200903/Article_20090322150830_8.html';
txt5=new Image();txt5.txt='呼培星';

img6=new Image();img6.src='/Article/UploadFiles/200903/20090322151107467.JPG';
url6=new Image();url6.src='/Article/zhuanjiahuicui/200903/Article_20090322150830_8.html';
txt6=new Image();txt6.txt='王待天老专家正在会诊';

img7=new Image();img7.src='/Article/UploadFiles/200903/20090322151106981.JPG';
url7=new Image();url7.src='/Article/zhuanjiahuicui/200903/Article_20090322150830_8.html';
txt7=new Image();txt7.txt='薛连德';

var nn=1; //当前所显示的滚动图
var key=0;    //标识是否为第一次开始执行
var tt;    //标识作用

function change_img()
{
if(key==0){key=1;} //如果第一次执行KEY=1,表示已经执行过一次了。
else if(document.all)//document.all仅IE6/7认识,firefox不会执行此段内容
{
document.getElementById("pic").filters[0].Apply(); //将滤镜应用到对像上
document.getElementById("pic").filters[0].Play(duration=2);    //开始转换
document.getElementById("pic").filters[0].Transition=23;//转换效果
}

eval('document.getElementById("pic").src=img'+nn+'.src');     //替换图片
eval('document.getElementById("url").href=url'+nn+'.src'); //替换URL
eval('document.getElementById("title").value=txt'+nn+'.txt'); //替换ALT

for (var i=1;i<=counts;i++)
{
    document.getElementById("xxjdjj"+i).className='axx';     //将下面黑条上的所有链接变为未选中状态
}
document.getElementById("xxjdjj"+nn).className='bxx';      //将当前页面的ID设置为选中状态
nn++;
if(nn>counts){nn=1;}    //如果ID大于总图片数量。则从头开始循环
tt=setTimeout('change_img()',7000);    //在4秒后重新执行change_img()方法.
}
function changeimg(n)//点击黑条上的链接执行的方法。
{
nn=n; //当前页面的ID等于传入的N值,
window.clearInterval(tt); //清除用于循环的TT
//重新执行change_img();但change_img()内所调用的图片ID已经在此处被修改,会从新ID处开始执行.
change_img();
}
//样式表
document.write('<style>');
document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;font-size:12px;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#009900;}');
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#ff9900;}');
document.write('</style>');
//内容部分
document.write('<div style="width:'+widthss+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;float:left;">');
document.write('<div><a id="url" target="_blank"><img id="pic" style="border:1px #cbcbcb solid;FILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=2,transition=23)" width='+widths+' height='+heights+' /></a></div>');
document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=90);background: #888888;width:100%-2px;text-align:right;top:-16px;position:relative;margin:1px;height:14px;border:0px;padding-top:1px;z-index:4000;"><div>');
for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}
document.write('</div></div></div>');
document.write('<div align=center><input id="title" type="txt" style="height:20px;background-color:#f2f6fb;border:0px solid #f2f6fb;width:'+widthss+'px;color:#ff8800;font-size:9pt;position:relative;padding-top:1;text-align:center;"></div>');
//document.write('</div>');
//开始执行滚动操作
change_img();

//-->
</SCRIPT>
</div>


以上代码经过测试可用!并且图片之间的切换还有切换特效。
 

顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
赞助商位置
推荐内容
杂七杂八