代码说明:把代码粘贴好之后,需要更改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 图片淡入淡出效果 实例源代码的更多相关文章

  1. [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

    http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...

  2. React-Native ListView加载图片淡入淡出效果的组件

    今天练习项目中需要给listview在加载图片时增加一个淡入淡出的效果,因此干脆就自己封装了一个组件: 'use strict' import React from 'react-native' va ...

  3. jQuery实现简单的图片淡入淡出效果

    整体思路: 1.实现页面布局,设置css样式 2.用jQuery获取需要用到的变量 3.用jQuery为两个按钮绑定事件 一.页面布局: <div class="d1"> ...

  4. javascript写淡入淡出效果的轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 基于jquery实现的文字淡入淡出效果

    这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  6. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

  7. javascript淡入淡出效果的实现思路

    这个思路是最近写XScroll.js类的时候想明白的.平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了.不过经过分析,我觉得其实只需要一半就行了如题,只有思路,没有代码. 这个思 ...

  8. Jquery小例子:全选按钮、加事件、挂事件;parent()语法;slideToggle()语法;animate()语法;元素的淡入淡出效果:fadeIn() 、fadeOut()、fadeToggle() 、fadeTo();function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  9. javascript - 图片的幻灯片效果

    javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...

随机推荐

  1. maven -- 学习笔记(三)之搭建nexus私服

    下载和安装nexus (1)官网链接http://www.sonatype.org/nexus/archived/ (直接点击下载链接,发现下载不了,FQ+迅雷就可以下载) (2)解压到指定文件夹,然 ...

  2. select语句for update---转载

    作用: Select…For Update语句的语法与select语句相同,只是在select语句的后面加FOR UPDATE [NOWAIT]子句. 该语句用来锁定特定的行(如果有where子句,就 ...

  3. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  4. layout_weight详解

    注:LinearLayout中的TextView按比例显示的时候,layout_width="0dp"或者layout_height="0dp" 在androi ...

  5. solr:快速开始

    本文已挪至  http://www.zhoujingen.cn/blog/8535.html 明年工作主要和搜索有关,在自己学习过程中分享让更多人受益是我一贯的做法,所以我会把对Solr的学习在这里与 ...

  6. Moon.Orm 5.0(MQL版)及之前版本的开源计划

    开源综述:步步开源 Moon.Orm 5.0 (MQL版) 版本维护及下载 (跟踪发布) Moon.Orm 5.0系列文章 Moon.Orm 5.0性能问题,将发言权交给你! 一.5.0目前的情况,步 ...

  7. 需要正确安装 Microsoft.Windows.ShellExperienceHost 和 "Microsoft.Windows.Cortana" 应用程序。

    windows 10 开始菜单修复工具 Win10开始菜单修复工具出现的原因,自从升级到Windows  10,一直BUG不断,而其中有一个BUG非常的让你印象深刻,就是开始菜单无响应,你用着用着电脑 ...

  8. ASP.NET MVC图片管理(更新)

    Insus.NET在ASP.NET MVC专案中,实现了图片管理,上传,预览,显示,删除等功能,还差一个功能,就是更新图片的功能,那这次来完成它.你可以先参考前2篇<ASP.NET MVC图片管 ...

  9. C#反射技术概念作用和要点

    反射(Reflection)是.NET中的重要机制,通过放射,可以在运行时获得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以及构造函数等.还可以获得每个成员的 ...

  10. 【iOS】关联属性存取数据

    有时候我们需要在现有的类存放一些额外的信息,通常的做法是继承一个子类,然后定义新增加的属性,然而如果我们为每个需要的类都添加一个类显得太麻烦了,objc提供了一个关联属性的特性,可以给一个对象关联一个 ...