附件中提供另一种实现方式 基本类似 主要的实现方法如下：

var ShowAD=function(i){
   showImg.eq(i).animate({opacity:1},settings.speed).css({"z-index":
 "1"}).siblings().animate({opacity: 
0},settings.speed).css({"z-index":"0"});
   $("#flow").animate({top:i*76+"px"})
  };

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META http-equiv=x-ua-compatible content=IE=7>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif;margin:0 auto; text-align:center; }
table{border-collapse:collapse;border-spacing:0;}
b,em,i{ font-style:normal; font-weight:normal;}
h1,h2,h3,h4{ font-size:14px;font-style:normal;}
h5{ font-size:12px;}
h6{ font-size:12px;font-weight:normal;}
img{display:block;}
.box-163css{WIDTH: 950px; HEIGHT: 99px; margin:20px auto;}
#slideshow2 {POSITION: relative; width:100%;}
#slideshow2
 DIV {Z-INDEX: 8; LEFT: 0px;  TOP: 0px;OVERFLOW: hidden; WIDTH: 950px; 
POSITION: absolute; HEIGHT: 95px; BACKGROUND-COLOR: #fff; opacity: 0.0}
#slideshow2 DIV.current {Z-INDEX: 10}
#slideshow2 DIV.prev {Z-INDEX: 9}
#slideshow2 DIV IMG {DISPLAY: block; WIDTH: 950px; HEIGHT: 95px; border:none}
</style>
<SCRIPT src="js/jquery-1.3.2.min.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
function slideSwitch() {
    var $current = $("#slideshow2 div.current");//当前图片的div
    if ($current.length == 0) $current = $("#slideshow2 div:last");//如果没有当前的图片，最后一张就是当前图片
    var $next = $current.next().length ? $current.next() : $("#slideshow2 div:first");//当前图片所指div的下一个 如果存在就取下一个 否则取第一个
    $current.addClass('prev');//当前的变成prev 放在第9层
    $next.css({
        opacity: 0.0
    }).addClass("current").animate({
        opacity: 1.0
    }, 1000, function () {
        $current.removeClass("current prev");
    });//要切换出来的新图片透明度设为0，然后变为当前的第10层并透明度渐变到1,在变化过程中可以看到第9层的图片，然后把第9层的图片去掉2个class，让图片置在第8层
}
$(function () {
    $(".current").css("opacity", "1.0");//先把当前图片的透明度设置为1
    setInterval("slideSwitch()", 3000);
});
</SCRIPT>
</HEAD>
<BODY>
<div class="box-163css">
  <div id=slideshow2>
    <div class=current> <a href="#" target=_blank><IMG src="data:images/banner_mobile.jpg"></a> </div>
   
 <div style="MARGIN-BOTTOM:8px"> <a href="#" 
target=_blank><IMG src="data:images/jiafang-banner.jpg"></a> 
</div>
  </div>
</div>
</BODY>
</HTML>

adslide.rar(1.9 MB)

下载次数: 120

JQuery淡入淡出 banner切换特效的更多相关文章

  1. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  2. jquery叠加页片自动切换特效

    查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...

  3. 一款仿PBA官网首页jQuery焦点图的切换特效

    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

  4. 用CALayer实现淡入淡出的切换图片效果

    由于直接更改layer的contents显示的隐式动画切换的时候的动画持续时间没办法控制, 切换效果不尽人意,所以这里配合了CABasicAnimation实现淡入淡出的切换效果, 另外还可以使用组合 ...

  5. 一款jquery实现的整屏切换特效

    今天要为大家带来一款由jquery实现的整屏切换特效,在右侧有圆型小标,每点一个切换一屏.当然,你也可以滚动鼠标来切换页面.效果非常好.我们看下效果吧 在线预览   源码下载 html代码: < ...

  6. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  8. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  9. jQuery 淡入淡出

    演示 jQuery fadeIn() 方法: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

随机推荐

  1. PHP.10-PHP实例（一）-简单的计算器

    PHP-简单的计算器 [PHP语法详解] PHP在web开发中的应用 PHP编写步骤 1.编写一个后缀名为.php文件2.上传到Web服务器的文档根目录下3.通过浏览器访问Web服务器管理下的PHP文 ...

  2. C#项目代码规范

    C#项目代码规范   前言 小菜就是小菜,几个人搞出来的项目,让公司大牛稍微看了下,最后送出了惨不忍睹四个字.命名各种各样,五花八门,大写英文.小写英文.大写拼音.小写拼音.英文和拼音组合.字母和特殊 ...

  3. Java基础知识强化103：Java常量池理解与总结

    一.相关概念 1. 什么是常量 用final修饰的成员变量表示常量,值一旦给定就无法改变! final修饰的变量有三种:静态变量.实例变量和局部变量,分别表示三种类型的常量. 2. Class文件中的 ...

  4. Android（java）学习笔记107-1：通过反射获得带参构造方法并且使用

    反射获得带参构造方法并且使用: 1. 获取字节码文件对象       Class c = Class.forName("cn.itcast_01.Person"); 2.获取带参构 ...

  5. JavaScript开发之路02（Sencha Touch使用时常见问题及解决办法）

    1.Sencha中使用组件后通过layout: 'vbox'指定页面布局为垂直盒布局并且组件的高度采用height: '百分比'指定时,组件的背景色通过style: 'background:#F6F6 ...

  6. 为Google Reader守夜。。。

    Google的阅读器快要关闭了... 立刻截图留恋呢,以后就没机会了. 唉,真是令人惋惜. 虽然我接触Google Reader还不到一年,但是我已经习惯当连上WiFi时马上更新一下手机上的gRead ...

  7. PL/SQL developer 使用技巧汇总

    为了快速的使用PL/SQL developer 进行 oracle数据库相关开发,将一些使用频率较高的使用技巧进行汇总如下,以下转自网络和自己的测试 1.切换schema --switch schem ...

  8. Class类中getMethods() 与getDeclaredMethods() 方法的区别

    一:jdk API中关于两个方法的解释 1:getMethods(),该方法是获取本类以及父类或者父接口中所有的公共方法(public修饰符修饰的) 2:getDeclaredMethods(),该方 ...

  9. Spring(3.2.3) - Beans(12): 属性占位符

    使用属性占位符可以将 Spring 配置文件中的部分元数据放在属性文件中设置,这样可以将相似的配置(如 JDBC 的参数配置)放在特定的属性文件中,如果只需要修改这部分配置,则无需修改 Spring ...

  10. Fragment 整个生命周期

      时间 2014-05-21 17:09:53 CSDN博客原文 http://blog.csdn.net/linfeng24/article/details/26491407 Fragment 生 ...