javascript 图片淡入淡出效果 实例源代码
代码说明：把代码粘贴好之后，需要更改html代码中的图片路径，即可执行成功。
后面还有对js代码的详细说明，希望大家好好消化，好好理解。 html源代码：
<head>
<title>图片切换</title>
<script type="text/javascript" src="图片切换.js"></script>
<link rel="stylesheet" type="text/css" href = "图片切换.css">
</head>
<body>
<div id="ad">
<ul>
<li style="filter:alpha(opacity=100); opacity:1;"><img src="banner/ad_banner1.png" alt="" /></li>
<li><img src="banner/ad_banner2.png" alt="" /></li>
<li><img src="banner/ad_banner3.png" alt="" /></li>
</ul>
</div>
</body>
css源代码：
#ad {width: 942px;height:302px;position:relative; margin:0 auto;}
#ad ul {position: absolute;top:;left:;}
#ad li {position: absolute; top:; left:;opacity:;}
javascript源代码：
window.onload = function ()
{
jzk.app.Tobanner();
} var jzk = {}; jzk.tools = {};
jzk.tools.getStyle = function(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
} jzk.ui = {};
jzk.ui.fadeIn = function(obj)
{
var iCur = jzk.tools.getStyle(obj,'opacity');
if(iCur==1)
{
return false;
} var value = 0;
clearInterval(obj.finishtimer);
obj.finishtimer = setInterval(function() {
var ispeed = 5;
if(value == 100)
{
clearInterval(obj.finishtimer);
}
else
{
value = value +ispeed;
obj.style.opacity = value/100;
obj.style.filter = "alpha=('+value+')";
}
}, 30); }
jzk.ui.fadeOut = function(obj)
{
var iCur = jzk.tools.getStyle(obj,'opacity');
if(iCur==0)
{
return false;
} var value =100;
clearInterval(obj.finishtimer);
obj.finishtimer = setInterval(function() {
var ispeed = -5;
if(value == 0)
{
clearInterval(obj.finishtimer);
}
else
{
value = value +ispeed;
obj.style.opacity = value/100;
obj.style.filter = "alpha=('+value+')";
}
}, 30); } jzk.app = {};
jzk.app.Tobanner=function()
{
var ad = document.getElementById('ad');
var lists = ad.getElementsByTagName('li'); var iNow = 0;
var finishtimer = setInterval(showpic,4000); function showpic ()
{
if(iNow == lists.length-1)
{
iNow = 0;
}
else
{
iNow ++;
}
for(var i=0;i<lists.length;i++)
{
jzk.ui.fadeOut(lists[i]);
}
jzk.ui.fadeIn(lists[iNow]);
}
}
对javascript源代码的几大点理解：
一.我采用分层的理念编写代码，思路清晰，对后期的管理和修改很有帮助：
1.var jzk ={}；定义民命空间；
2.jzk.tools = {}； 分层第一层，基本应用工具；
3.jzk.ui = {}； 分层第二层，一些广泛使用的函数包装；
jzk.app = {}； 分层第三层，直接用于页面调用的应用函数；
二.jzk.tools层上的函数：
jzk.tools.getStyle函数用于定义一个可以获取元素属性值得函数；
三.jzk.ui层上的函数：
1.jzk.ui.fadeIn函数功能：淡出函数（用来显示图片），在后面的jzk.app层中将会被调用；值得注意的是下面这段代码：
var iCur = jzk.tools.getStyle(obj,'opacity');
if(iCur==1)
{ return false;
}
这段代码是必不可少的，意思解释为：定义变量iCur存储元素的opacity属性值，判断如果为1，也就是完全可见的元素，则返回错误，不执行下面的代码；
2.jzk.ui.fadeOut函数功能：淡入函数（用来隐藏图片），同样是这样一段代码：
var iCur = jzk.tools.getStyle(obj,'opacity');
if(iCur==0)
{
return false;
}
因为此处是用来隐藏图片，所以先定义变量iCur存储元素的opacity属性，判断如果为0，也就是完全不可见图片，所以就没必要再隐藏，所以返回错误；
四.jzk.app层上的函数：
jzk.app.Tobanner函数功能，就是用来页面调用的应用函数，定义一个当前变量，使当前图片显示，其他的图片隐藏，从而达到了淡入淡出的效果。
五.页面调用：
页面调用代码实现：
window.onload = function （）
{
jzk.app.Tobanner（）；
}
直接调用应用层的函数即可。
javascript 图片淡入淡出效果 实例源代码的更多相关文章
- [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)
http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...
- React-Native ListView加载图片淡入淡出效果的组件
今天练习项目中需要给listview在加载图片时增加一个淡入淡出的效果,因此干脆就自己封装了一个组件: 'use strict' import React from 'react-native' va ...
- jQuery实现简单的图片淡入淡出效果
整体思路: 1.实现页面布局,设置css样式 2.用jQuery获取需要用到的变量 3.用jQuery为两个按钮绑定事件 一.页面布局: <div class="d1"> ...
- javascript写淡入淡出效果的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于jquery实现的文字淡入淡出效果
这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果
最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...
- javascript淡入淡出效果的实现思路
这个思路是最近写XScroll.js类的时候想明白的.平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了.不过经过分析,我觉得其实只需要一半就行了如题,只有思路,没有代码. 这个思 ...
- Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- javascript - 图片的幻灯片效果
javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...
随机推荐
- [转载]UML时序图总结
前言 在我的工作中,用的最多的就是时序图了.可能由于工作的原因,我也是最喜欢画时序图了,很清楚,很明了,什么时候发送什么消息,到达什么状态,一下子就展示在你的脑海里,对于消息驱动的程序来说,是再好不过 ...
- Oracle ASM diskgroup在主机重启后启动失败
环境:RHEL 6.4 + Oracle 11.2.0.3 + ASM单实例 1.重启主机后,+DATA diskgroup启动不成功,现象如下: [grid@JY-DB ~]$ crsctl sta ...
- WIN7 共享网络方法
WIN7 共享网络方法 第一步: 按WIN+R调出“运行”栏,在“运行”菜单栏输入“cmd”,出现命令提示符,输入命令“netsh wlan set hostednetwork mode=allow ...
- Linux脚本，关闭服务器的所有tomcat并且重新启动
echo '开始查找tomcat进程' ID=`ps -fx | grep tomcat | awk '{print $1}'` echo $ID echo "开始结束tomcat进程&qu ...
- 也来玩玩 javascript对象深拷贝，浅拷贝
经常看到讨论c#深拷贝,浅拷贝的博客,最近js写的比较多, 所以也来玩玩js的对象拷贝. 下面是维基百科对深浅拷贝的解释: 浅拷贝 One method of copying an object is ...
- 主成分分析(PCA)的一种直观理解
源自知乎的一个答案,网上很多关于PCA的文章,不过很多都只讲到了如何理解方差的投影,却很少有讲到为什么特征向量就是投影方向.本文从形象角度谈一谈,因为没有证明,所以不会严谨,但是应该能够帮助形象理解P ...
- elasticsearch 文档
elasticsearch 文档 文档格式 索引中最基本的单元叫做文档 document. 在es中文档的示例如下: { "_index": "questions&quo ...
- HTML5的WebGL实现的3D和2D拓扑树
在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在 ...
- BZOJ1088扫雷Mine 解析报告
1088: [SCOI2005]扫雷Mine Description 相信大家都玩过扫雷的游戏.那是在一个n*m的矩阵里面有一些雷,要你根据一些信息找出雷来.万圣节到了,“余”人国流行起了一种简单的扫 ...
- Android Studio导入项目非常慢的解决办法
问题 Android Studio目前已经更新到2.0 Preview 6了,作为Google大力推崇的开发工具,相对于Eclipse ADT有着不可比拟的优势.然而在实际使用时,依然有不少不爽的地方 ...