您的位置：首页 > Web前端 > JQuery

JQuery淡入淡出 banner切换特效

2014-03-28 03:52 204 查看

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

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>

adslide.rar(1.9 MB)

下载次数: 120

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航