社区
CSS
帖子详情
常见网页图像切换效果问题
fanhui186
2010-04-03 06:07:27
谁能告诉我,网页中图像自动变换,并且下面还有1234也随之变化。
...全文
143
3
打赏
收藏
常见网页图像切换效果问题
谁能告诉我,网页中图像自动变换,并且下面还有1234也随之变化。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
3 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
LIUHANXU860311
2010-04-06
打赏
举报
回复
百度、谷歌上搜js特效,有的是!
LIUHANXU860311
2010-04-06
打赏
举报
回复
百度、谷歌上搜js特效,有的是!
nightsky_0911
2010-04-03
打赏
举报
回复
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>很不错的flash图片幻灯片轮换效果</title>
<head>
<style type="text/css">
.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}
.loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}
.d2{width:100%;height:209px;overflow:hidden;}
.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}
.num_list span{display:inline-block;height:16px;padding-left:6px;}
img{border:0px;}
ul{display:none;}
.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}
.b2{color:#FFCC33;background-color:#FF6633;}</style><script language="javascript" type="text/javascript">
var s=function(){
var interv=2000; //切换间隔时间
var interv2=10; //切换速速
var opac1=80; //文字背景的透明度
var source="fade_focus" //焦点轮换图片容器的id名称
//获取对象
function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}
function getid(id){return document.getElementById(id)};
var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);}
//控制图层透明度
function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}
//控制焦点按钮
function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}
title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);
//渐显
var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}
//渐隐
var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}
//滚动文字
var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}else if(num>0&&t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};
fadeon();
}
//初始化
window.onload=s;
</script>
</head>
<body>
<div id="fade_focus">
<div class="loading">Loading...<br />
<img alt="" width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201002/loading.gif" /></div>
<ul>
<li><a target="_blank" href="http://www.websky18.net"><img alt="展示图片1" width="443" height="209" src="http://websky18.com/d/file/cddh/2010-02-24/4.jpg" /></a> </li>
<li><a target="_blank" href="websky18"><img alt="展示图片2" width="443" height="209" src="http://websky18.com/d/file/cddh/2010-02-24/1.jpg" /></a></li>
<li><a target="_blank" href="websky18"><img alt="展示图片3" width="443" height="209" src="http://websky18.com/d/file/cddh/2010-02-24/2.jpg" /></a></li>
<li><a target="_blank" href="websky18"><img alt="展示图片4" width="443" height="209" src="http://websky18.com/d/file/cddh/2010-02-24/3.jpg" /></a></li>
</ul>
</div>
</body>
</html>
原文
:
http://websky18.com/tptx/2010-02-23/25.html
《Android应用开发揭秘》源码
4.2.15 拖动
效果
(Gallery) 4.2.16
切换
图片(hmgeSwilcher) 4.2.17 网格视图(GridView) 4.2.18 卷轴视图(ScrollView) 4.2.19 进度条(ProgressBar) 4.2.20 拖动条(SeekBar) 4.2.21 状态栏提示...
java源码包---java 源码 大量 实例
Java绘制图片火焰
效果
,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的
效果
的Image对象、Applet和绘制火焰的
效果
的Graphics对象、火焰
效果
的线程、Applet的高度,图片到图片装载器、绘制火焰
效果
的X坐标...
matab
图像
专题精讲
课程内容主要包括入门MATLAB
图像
处理
图像
类型转换、
图像
处理
图像
的基本操作...
图像
进行恢复
效果
实验、Lucy迭代算法对模糊噪声
图像
进行恢复、Lucy迭代算法对模糊噪声彩色
图像
进行恢复、通过拉伸实现对比度增强、
图像
锐化...
java源码包2
Java绘制图片火焰
效果
,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的
效果
的Image对象、Applet和绘制火焰的
效果
的Graphics对象、火焰
效果
的线程、Applet的高度,图片到图片装载器、绘制火焰
效果
的X坐标...
java源码包3
Java绘制图片火焰
效果
,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的
效果
的Image对象、Applet和绘制火焰的
效果
的Graphics对象、火焰
效果
的线程、Applet的高度,图片到图片装载器、绘制火焰
效果
的X坐标...
CSS
61,112
社区成员
60,732
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章