代码说明：把代码粘贴好之后，需要更改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. 关于IIS部署时出现“System.Data.OracleClient 需要 Oracle 客户端软件 8.1.7 或更高版本”的问题解决摘要

    系统环境:windows2008 X64 IIS版本:iis7 oracle客户端版本:11g,另外装了32位的客户端. 网站.net framework版本: 4.0 目前状况,IIS可以正常运行, ...

  2. 使用NPOI从Excel中提取图片及图片位置信息

    问题背景: 话说,在ExcelReport的开发过程中,有一个比较棘手的问题:怎么复制图片呢? 当然,解决这个问题的第一步是:能使用NPOI提取到图片及图片的位置信息.到这里,一切想法都很顺利.但NP ...

  3. 应用在tomcat下的四种部署方式(原创)

    1.XML主动部署 2.XML自动部署 3.WAR自动部署 4.DIR自动部署 主动部署就是在server中配置部署,自动部署不需要在server中部署. 自动部署要比主动部署多一些功能,例如监测特定 ...

  4. 轻松自动化---selenium-webdriver(python) (三)

     本节重点: 简单对象的定位 -----自动化测试的核心 对象的定位应该是自动化测试的核心,要想操作一个对象,首先应该识别这个对象.一个对象就是一个人一样,他会有各种的特征(属性),如比我们可以通过一 ...

  5. 开发人员看测试之运行Github中的JBehave项目

    本文要阐述的主要有两点,一是介绍自动化测试框架JBehave,二是介绍如何在Github上拉项目,编译成myeclipse环境中的项目,并最终导入Myeclipse中运行. JBehave是何物? J ...

  6. Web 前端开发人员和设计师必读文章推荐【系列二十八】

    <Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  7. HT for Web可视化QuadTree四叉树碰撞检测

    QuadTree四叉树顾名思义就是树状的数据结构,其每个节点有四个孩子节点,可将二维平面递归分割子区域.QuadTree常用于空间数据库索引,3D的椎体可见区域裁剪,甚至图片分析处理,我们今天介绍的是 ...

  8. Spark API 之 combineByKey（一）

    1       前言 combineByKey是使用Spark无法避免的一个方法,总会在有意或无意,直接或间接的调用到它.从它的字面上就可以知道,它有聚合的作用,对于这点不想做过多的解释,原因很简单, ...

  9. SpringMVC——自定义拦截器、异常处理以及父子容器配置

    自定义拦截器: 一.若想实现自定义拦截器,需要实现 org.springframework.web.servlet.HandlerInterceptor 接口. 二.HandlerIntercepto ...

  10. PHPcms 系统简单使用

    1.站点/发布点的新建 1.1 发布点的新建: 发布点是设置站点与服务器之间的链接配置. 设置 - 发布点管理 - 添加发布点 发布点名:可以与接下来的站点名称相同 ftp服务器:用于设置PHPcms ...