• 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; 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

  • 相关阅读:
    【1801日語听解4】第14回:6月9日
    【日語听解2】第14回:6月8日
    【日語視聴説2】第14回:6月8日
    【日本語新聞編集】第13回:6月5日
    【1801日語写作】第13回:6月4日
    【日本語新聞選読】第13回:6月2日
    Win10版本
    家庭或小规模无线使用方
    批处理bat复制命令Copy与Xcopy
    批处理bat删除命令
  • 原文地址:https://www.cnblogs.com/wawahaha/p/3629832.html
Copyright © 2020-2023  润新知