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

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. 琐碎-到底要不要SSH免密码设置

    搭建了很多次hadoop2.2.0了,尝试过很多不同的启动方法.配置参数.位置,其中涉及到到底要不要配置SSH免密码登录的问题 先是搞清楚为什么需要SSH免密码登录 SSH免密码登录操作步骤: ... ...

  2. hashTable(哈希表)的基本用法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...

  3. cocos2d-x lua 使用自定义消息EventCustom

    cocos2d-x lua 使用自定义消息EventCustom version: cocos2d-x 3.6 1.发送消息 -- post message -- event将会被传递给消息接收函数, ...

  4. c#导出Excel 使用EXCEL进程

    private void exportExcel(string filename, string path,string title, List<ArchivedWcsTask> wcst ...

  5. [转]让ORACLE LIKE 时不区分大小写

    本文转自:http://hi.baidu.com/dosttyy/item/9073803df47ef9f62784f49a 让ORACLE LIKE 时不区分大小写: select * from t ...

  6. Sublime Text3 包管理器、插件安装

    安装插件之前先要安装包管理器,包管理器的安装也很简单,复制粘贴对应版本命令代码回车即可 一.包管理器安装 1.打开Sublime3控制台,按ctrl+~ 2.输入安装包管理器命令行代码 3.注意需要联 ...

  7. PHP中的Trait

    Trait 自 PHP 5.4.0 起,PHP 实现了一种代码复用的方法,称为 trait. Trait 是为类似 PHP 的单继承语言而准备的一种代码复用机制.Trait 为了减少单继承语言的限制, ...

  8. Angular 全局页面切换动画 me-pageloading

    最近看了Codrops的一篇文章, 里面讲到了一个页面切换的效果, 详情点击此处. 看了这个效果感觉很赞, 觉得这个效果可以用在angular的页面切换中, 所以将这个效果移植到angular中, 做 ...

  9. WCF配置文件详解 【转】

    ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ...

  10. Android Studio 快捷方式

    Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O 优化导入的类和包 Alt+Insert 生成代码(如g ...