JQuery淡入淡出 banner切换特效

浏览数：232 / 时间：2015年06月09日

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

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="images/banner_mobile.jpg"></a> </div>
    < div style="MARGIN-BOTTOM:8px"> <a href="#" target=_blank><IMG src="images/jiafang-banner.jpg"></a> < /div>
  </div>
</div>
</BODY>
</HTML>