JQuery淡入淡出 banner切换特效

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

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

转载于:https://www.cnblogs.com/wawahaha/p/3629832.html

JQuery淡入淡出 banner切换特效相关推荐

一款jquery实现的整屏切换特效
今天要为大家带来一款由jquery实现的整屏切换特效,在右侧有圆型小标,每点一个切换一屏.当然,你也可以滚动鼠标来切换页面.效果非常好.我们看下效果吧在线预览源码下载 html代码: < ...
jquery叠加页片自动切换特效
查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...
jquery淡入淡出效果及突出显示案例
fadeToggle方法可以动态地让淡入淡出相互切换 fadeTO方法淡入淡出到指定透明度使用fadeTo方法让元素透明度淡入到0时,这个元素还是会保留原有位置的宽和高,只不过是透明度透明了而已从 ...
jQuery 淡入淡出
jQuery Fading 方法通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...
jQuery |淡入淡出
通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fadeTo() 下面一一介绍 jQu ...
Web入门：JQuery淡入淡出面板
欢迎来的我的小院,恭喜你今天又要涨知识了! 案例内容利用JQuery的fadeToggle() 方法,完成面板淡入淡出. 演示学习 <!DOCTYPE html> <html l ...
jQuery 淡入淡出、滑动和动画
一.淡入淡出 1.jQuery fadeIn() 方法 jQuery fadeIn() 用于淡入已隐藏的元素. 语法:$(selector).fadeIn(speed,callback); 可选的 s ...
jQuery淡入淡出fadeIn() fadeOut() fadeToggle() fadeTo()
通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fadeTo() 1,jQuery f ...
jQuery：jQuery淡入淡出效果语法及修改透明度fadeTo()
1.淡入效果: fadeIn([speed],[easing]),[fn]; 淡入效果参数: 参数是可以都省略的,和之前show().hide()参数一样: speed:有slow.normal.fa ...
html多国语言配置方法,jquery多国语言切换特效
这是一款实现多国语言切换的jquery特效.在这个示例中,通过简单的js代码,实现包括中文和英文在内的7种不同国家语言的切换效果. 使用方法在页面中引入jquery和style.css. HTML结 ...

JQuery淡入淡出 banner切换特效

JQuery淡入淡出 banner切换特效相关推荐

最新文章

热门文章