js旋转和添加问题？？？？急急急


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>before my eyes - Interactive DHTML art-demos</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html { overflow: hidden; }
body { background: #000; width:100%; height:100%; margin:0; }
#screen { position: absolute; width: 100%; height: 100%; }
#img { visibility: hidden; }
#screen img { position:absolute; left:-10000px; z-index:100; -ms-interpolation-mode:nearest-neighbor; image-rendering: optimizeSpeed; cursor: pointer; border:#333 solid 1px; }
#tit { text-align:center; position:absolute; color:#fff; font-family:verdana; font-weight:bold; font-size:48px; filter: alpha(opacity=30); opacity: 0.3; width:100%; bottom:12px; z-index:10000; }
#index{position:absolute;bottom:100px}
#index span{position: absolute;text-align: center;}
</style>
<script type="text/javascript"> 
 
  
  
var diapo = function () {
    var object = new Array(),
        K  = Math.PI / 180,<!--转动时间-->
        N  = 0,
        xm = 0,
        ym = 0,
        mx = 0,
        my = 0,
        ax = 0,
        ay = 0,
        Nb = 0,
        tit = 0,
        img = 0;
////////////////////
    var zM = 20;
////////////////////
    var CObj = function (N, x, y, z){
        var I = img.getElementsByTagName("img")[N % img.getElementsByTagName("img").length];
        var o = document.createElement("img");
        o.onclick = function () {
            if (object[N].on == true) object[N].on = false;
            else object[N].on = true;
        }
        o.onmouseover = function () {
            if (Nb != N) {
                Nb = N;
                tit.innerHTML= I.alt;
            }
        }
        o.onmouseout = function () {
            Nb = -1;
            object[N].on = false;
        }
        o.onmousedown = new Function("return false");<!--鼠标点击事件-->
        o.src = I.src;
        scr.appendChild(o);
        this.obj  = o.style;
        this.z    = Math.round(z * ny * .10);
        this.x    = Math.round(x * ny * .10);
        this.y    = Math.round(y * ny * .10);
        this.on   = false;
        this.zOOm = 2;
        this.N    = N;
    }
     
    CObj.prototype.anim = function () {
        var xP = this.z * Math.sin(mx * K) + this.x  * Math.cos(mx * K);
        var zP = this.z * Math.cos(mx * K) - this.x  * Math.sin(mx * K);
        var yP = this.y * Math.cos(my * K) - zP * Math.sin(my * K);
        zP = this.y * Math.sin(my * K) + zP * Math.cos(my * K);
        var w = (zP * .10 + ny * .10) * this.zOOm;
        var h = w * .6;
        if (this.on && zP > 0) {
            if (this.zOOm < zM) this.zOOm += .05;
        } else {
            if (this.zOOm > 1) this.zOOm -= .025;
        }
        this.obj.left   = Math.round(xP + nx * .5 - w * .5) + "px";
        this.obj.top    = Math.round(yP + ny * .5 - h * .5) + "px";
        this.obj.width  = Math.round(w) + "px";
        this.obj.height = Math.round(h) + "px";
        this.obj.zIndex = Math.round(1000 + w);
    }
     
    var run = function () {
dx = (1 * xm) - mx;
//dy = (1 * ym) - my;
dy = 60;//正数向上 负数向下
mx += dx / 60;
my += dy / 60;
var i = 0, o;
while (o = object[i++]) o.anim();
setTimeout(run, 16);
}
     
    var resize = function () {
        nx = scr.offsetWidth;
        ny = scr.offsetHeight * .9;
    }
     
    var init = function () {
        scr = document.getElementById("screen");
        img = document.getElementById("img");
        tit = document.getElementById("tit");
        resize();
        scr.onselectstart = new Function("return false");
        onresize = resize;
     
         
  //    scr.onmousemove = function(e){<!--鼠标事件-->             
  //            ym = (e.y || e.clientY);
  //      }
         
        object.push( new CObj(0,2,-1,-1));
        object.push( new CObj(1,2,1,-1) );
var col1 = new CObj(2,2,-1,1);
        object.push( col1 );
        object.push( new CObj(3,2,1,1) );
object.push( new CObj(4,0,-1,-1) );
        object.push( new CObj(5,0,-1,1) );
var col2 =new CObj(6,0,1,-1);
        object.push( col2 );
    object.push( new CObj(7,0,1,1) );
object.push( new CObj(8,-2,-1,-1) );
        object.push( new CObj(9,-2,1,-1) );
var col3 =new CObj(10,-2,-1,1);
        object.push( col3 );
        object.push( new CObj(11,-2,1,1) );
         
        run();
var index = document.getElementById("index").childNodes;
index[2].style.marginLeft = col1.obj.left;
index[2].style.width = col1.obj.width;
index[1].style.marginLeft = col2.obj.left;
index[1].style.width = col2.obj.width;
index[0].style.marginLeft = col3.obj.left;
index[0].style.width = col3.obj.width;
    }
    ////////////////////////////////////////////////////////////
    return {
        init : init
    }
}();
  
onload = function (){
    diapo.init();
}
  
</script>
</head>
<body>
<div id="screen">
  <div id="img">
   <img alt="1the promise" src="images/41800.jpg"> 
   <img alt="2through experience" src="images/20800.jpg"> 
   <img alt="3fit reward" src="images/238000.jpg">
    <img alt="4almost painful" src="images/44800.jpg">
     <img alt="5oblivion" src="images/49800.jpg"> 
     <img alt="6silent" src="images/218000.jpg"> 
     <img alt="7scrupulous" src="images/23800.jpg"> 
      </div>
  <div id="tit" ></div>
  <div id="index" style="color:#FFF"><span>1</span><span>2</span><span>3</span></div>
</div>
</body>
</html>

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>before my eyes - Interactive DHTML art-demos</title>
    <meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
    <meta http-equiv="imagetoolbar" content="no">
    <style type="text/css">
    html { overflow: hidden; }
    body { background: #000; width:100%; height:100%; margin:0; }
    #screen { position: absolute; width: 100%; height: 100%; }
    #img { visibility: hidden; }
    #screen div { position:absolute; left:-10000px; z-index:100; -ms-interpolation-mode:nearest-neighbor; image-rendering: optimizeSpeed; cursor: pointer; border:#333 solid 1px; }
    #screen img {
    width:100%;
    height:100%;
    }
    #tit { text-align:center; position:absolute; color:#fff; font-family:verdana; font-weight:bold; font-size:48px; filter: alpha(opacity=30); opacity: 0.3; width:100%; bottom:12px; z-index:10000; }
    #screen div {
    display:inline-block;
    }
    #screen div span{
    position:absolute;
    text-align: center;
    width:100%;
    font-size:20%;
    left:0;
    top:100%;
    color:#FFF;
    }
    #index{position:absolute;bottom:100px}
    #index span{position: absolute;text-align: center;}
    </style>
    <script type="text/javascript"> 
     
      
      
    var diapo = function () {
        var object = new Array(),
            K  = Math.PI / 180,<!--转动时间-->
            N  = 0,
            xm = 0,
            ym = 0,
            mx = 0,
            my = 0,
            ax = 0,
            ay = 0,
            Nb = 0,
            tit = 0,
            img = 0;
    ////////////////////
        var zM = 20;
    ////////////////////
        var CObj = function (N, x, y, z){
            var I = img.getElementsByTagName("img")[N % img.getElementsByTagName("img").length];
            var o = document.createElement("img");
    var s = document.createElement("span");
    var d = document.createElement("div");
            o.onclick = function () {
                if (object[N].on == true) object[N].on = false;
                else object[N].on = true;
            }
            o.onmouseover = function () {
                if (Nb != N) {
                    Nb = N;
                    tit.innerHTML= I.alt;
                }
            }
            o.onmouseout = function () {
                Nb = -1;
                object[N].on = false;
            }
            o.onmousedown = new Function("return false");<!--鼠标点击事件-->
            o.src = I.src;
    s.innerHTML = N;
    d.appendChild(s);
    d.appendChild(o);
            scr.appendChild(d);
            this.obj  = d.style;
            this.z    = Math.round(z * ny * .10);
            this.x    = Math.round(x * ny * .10);
            this.y    = Math.round(y * ny * .10);
            this.on   = false;
            this.zOOm = 2;
            this.N    = N;
        }
         
        CObj.prototype.anim = function () {
            var xP = this.z * Math.sin(mx * K) + this.x  * Math.cos(mx * K);
            var zP = this.z * Math.cos(mx * K) - this.x  * Math.sin(mx * K);
            var yP = this.y * Math.cos(my * K) - zP * Math.sin(my * K);
            zP = this.y * Math.sin(my * K) + zP * Math.cos(my * K);
            var w = (zP * .10 + ny * .10) * this.zOOm;
            var h = w * .6;
            if (this.on && zP > 0) {
                if (this.zOOm < zM) this.zOOm += .05;
            } else {
                if (this.zOOm > 1) this.zOOm -= .025;
            }
            this.obj.left   = Math.round(xP + nx * .5 - w * .5) + "px";
            this.obj.top    = Math.round(yP + ny * .5 - h * .5) + "px";
            this.obj.width  = Math.round(w) + "px";
            this.obj.height = Math.round(h) + "px";
            this.obj.zIndex = Math.round(1000 + w);
        }
         
        var run = function () {
    dx = (1 * xm) - mx;
    //dy = (1 * ym) - my;
    dy = 60;//正数向上 负数向下
    mx += dx / 60;
    my += dy / 60;
    var i = 0, o;
    while (o = object[i++]) o.anim();
    setTimeout(run, 16);
    }
         
        var resize = function () {
            nx = scr.offsetWidth;
            ny = scr.offsetHeight * .9;
        }
         
        var init = function () {
            scr = document.getElementById("screen");
            img = document.getElementById("img");
            tit = document.getElementById("tit");
            resize();
            scr.onselectstart = new Function("return false");
            onresize = resize;
         
             
      //    scr.onmousemove = function(e){<!--鼠标事件-->             
      //            ym = (e.y || e.clientY);
      //      }
             
            object.push( new CObj(0,2,-1,-1));
            object.push( new CObj(1,2,1,-1) );
    var col1 = new CObj(2,2,-1,1);
            object.push( col1 );
            object.push( new CObj(3,2,1,1) );
    object.push( new CObj(4,0,-1,-1) );
            object.push( new CObj(5,0,-1,1) );
    var col2 =new CObj(6,0,1,-1);
            object.push( col2 );
        object.push( new CObj(7,0,1,1) );
    object.push( new CObj(8,-2,-1,-1) );
            object.push( new CObj(9,-2,1,-1) );
    var col3 =new CObj(10,-2,-1,1);
            object.push( col3 );
            object.push( new CObj(11,-2,1,1) );
             
            run();
    var index = document.getElementById("index").childNodes;
    index[2].style.marginLeft = col1.obj.left;
    index[2].style.width = col1.obj.width;
    index[1].style.marginLeft = col2.obj.left;
    index[1].style.width = col2.obj.width;
    index[0].style.marginLeft = col3.obj.left;
    index[0].style.width = col3.obj.width;
        }
        ////////////////////////////////////////////////////////////
        return {
            init : init
        }
    }();
      
    onload = function (){
        diapo.init();
    }
      
    </script>
    </head>
    <body>
    <div id="screen">
      <div id="img">
       <img alt="1the promise" src="images/41800.jpg"> 
       <img alt="2through experience" src="images/20800.jpg"> 
       <img alt="3fit reward" src="images/238000.jpg">
        <img alt="4almost painful" src="images/44800.jpg">
         <img alt="5oblivion" src="images/49800.jpg"> 
         <img alt="6silent" src="images/218000.jpg"> 
         <img alt="7scrupulous" src="images/23800.jpg"> 
          </div>
      <div id="tit" ></div>
      <div id="index" style="color:#FFF"><span>1</span><span>2</span><span>3</span></div>
    </div>
    </body>
    </html>