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

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. Android自定义View，高仿QQ音乐歌词滚动控件！

    最近在以QQ音乐为样板做一个手机音乐播放器,源码下篇博文放出.今天我想聊的是这个QQ音乐播放器中歌词显示控件的问题,和小伙伴们一起来探讨怎么实现这个歌词滚动的效果.OK,废话不多说,先来看看效果图: ...

  2. cocos2dx新建android项目lib拷贝、访问权限等问题集

    win7上面搭建cocos2dx的android项目,用create-android-project.bat新建一个项目时,出现了访问权限和项目无lib的问题. 解决方案: 1.项目无lib问题. 当 ...

  3. CSS完成三角形

    通过设置div的border属性,来实现! 将div的height和width属性分别设置为0px,将4边的border值设置为一样的宽度,通过调节边框的颜色课看到效果. <style> ...

  4. [改善Java代码]由点及面,一叶知秋----集合大家族

    Java中的集合类实在是太丰富了,有常用的ArrayList.HashMap,也有不常用的Stack. Queue,有线程安全的Vector.HashTable,也有线程不安全的LinkedList. ...

  5. Share_memory

    共享内存是允许多个进程共享一块内存,由此来达到交换信息的进程通信机制:它很快没有中间介质,唯一的不足就是需要一定的同步机制控制多个进程对同一块内存的读/写,,它的原理如下: 每个共享内存段都有一个sh ...

  6. 约瑟夫环（N个人围桌，C语言，数据结构）

    约瑟夫环问题(C语言.数据结构版) 一.问题描述 N个人围城一桌(首位相连),约定从1报数,报到数为k的人出局,然后下一位又从1开始报,以此类推.最后留下的人获胜.(有很多类似问题,如猴子选代王等等, ...

  7. Delphi IP 控件源码

    interface uses Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs,ComCtrls, Co ...

  8. Insert data from excel to database

    USE ESPA Truncate table dbo.Interface_Customer --Delete the table data but retain the structure exec ...

  9. HOWTO: Be more productive

    ---by   Aaron Swartz HOWTO: Be more productive “With all the time you spend watching TV,” he tells m ...

  10. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...