关于图片渐变轮播

怎么没人回应啊，我遇到两个问题，一个是setTimeout语句还没执行完，下面的语句就执行了。另一个是我想让淡出谈出同时进行，能我一点提示吗，不胜感激吗？

解决方案 »

  1.   

    能给点意见吗？<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Image slide</title>
        <style type="text/css">
        </style>    <script type="text/javascript" language="javascript">
          window.onload=play;      var arrimgs =new Array();
          arrimgs[0]="img/p1.jpg";
          arrimgs[1]="img/p2.jpg";
          arrimgs[2]="img/p3.jpg";
          arrimgs[3]="img/p4.jpg";      function id(name){
            return document.getElementById(name);
          }
    function play(){
      for(var j=1;j<4;j++){
        fadeout();
        setTimeout(function (){
            id("imgBox").src=arrimgs[j];
            fadein();
            },2500*j);
      }
    }function fadein(){
      for(var i=1;i<26;i++){
        setTimeout("setOpacity("+4*i+")",100*i);
      }
    }function fadeout(){
      for(var i=1;i<26;i++){
        setTimeout("setOpacity("+(100-4*i)+")",100*i);
      }
    }function setOpacity(opacity){
      id("imgBox").style.opacity=opacity/100;
      id("imgBox").style.filter = "alpha(opacity="+opacity+")";  //for ie8 or earlier.
    }</script></head>
    <body>
      <div>
        <img id="imgBox" src="img/p1.jpg">
      </div>
    </body>
    </html>
      

  2.   

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Image slide</title>
        <style type="text/css">
            #img_div {
                position: relative;
                width: 478px;
                height: 285px;
                overflow: hidden;
                border: 1px solid #ddd
            }
            #img_div img {
                position: absolute;
                width: 478px;
                height: 285px;
            }
        </style>
        <script type="text/javascript" language="javascript">
            var arr = ["img/p1.jpg", "img/p2.jpg", "img/p3.jpg", "img/p4.jpg"];
            window.onload = function () {
                var id = document.getElementById("img_div");
                id.innerHTML = '<img src="' + arr.join('" alt=""><img src="') + '" alt="">';
                id.style.background = "url('" + arr.pop() + "') no-repeat center";
                var img = id.getElementsByTagName("img"), l = arr.length, n = 100;
                (function () {
                    var callee = arguments.callee;
                    n--;
                    if (n < 0) {
                        l--;
                        n = 100;
                        if (l < 0) {
                            l = arr.length;
                            for (var k = img.length; k--;) {
                                img[k].style.opacity = 1;//还原成不透明
                                img[k].style.filter = "alpha(opacity=100)";
                            }
                        }
                        setTimeout(callee, 3000);//每张图片停留3秒（自己调整）
                    } else {
                        setTimeout(callee, 30);//30毫秒改变一下透明度（自己调整）
                    }
                    img[l].style.opacity = n / 100;
                    img[l].style.filter = "alpha(opacity=" + n + ")";
                })();
            }
        </script>
    </head>
    <body>
    <div id="img_div"></div>
    </body>
    </html>
      

  3.   

    附上jquery写法：        var arr = ["img/p1.jpg", "img/p2.jpg", "img/p3.jpg", "img/p4.jpg"];
            $(function(){
                var img = $('<img src="' + arr.join('" alt=""><img src="') + '" alt="">').appendTo($("#img_div").css({background:"url('" + arr.pop() + "') no-repeat center"})),l = img.size()-1;
                (function () {
                    var callee = arguments.callee;
                    img.eq(l).animate({opacity:0},3000,function(){
                        l--;
                        if(l< 0){
                            img.css({opacity:1});
                            l = img.size()-1;
                        }
                        setTimeout(callee,4000);
                    });
                })();
            });
      

  4.   

    xzy21com写得很好，我很满意，谢谢。
      

  5.   

    var callee = arguments.callee;
    我有一事不明，上面这行是怎么个用法？