js代码动态图片效果 定义超链 在线等

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超酷超绚精美图片展示效果代码(三) - 网页特效观止-网页特效代码|JsCode.CN|</title>
<style type="text/css">
html {
overflow: hidden;
}body {
margin: 0px;
padding: 0px;
background: #000;
position: absolute;
width: 100%;
height: 100%;
cursor: crosshair;
}#diapoContainer {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: #222;
overflow: hidden;
}.imgDC {
position: absolute;
cursor: pointer;
border: #000 solid 2px;
filter: alpha(opacity=90);
opacity: 0.9;
visibility: hidden;
}.spaDC {
position: absolute;
filter: alpha(opacity=20);
opacity: 0.2;
background: #000;
visibility: hidden;
}.imgsrc {
position: absolute;
width: 120px;
height: 67px;
visibility: hidden;
margin: 4%;
}#bkgcaption {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 6%;
background:#1a1a1a;
}
#caption {
position: absolute;
font-family: arial, helvetica, verdana, sans-serif;
white-space: nowrap;
color: #fff;
bottom: 0px;
width: 100%;
left: -10000px;
text-align: center;
}</style>
<script type="text/javascript">
var xm;
var ym;/* ==== onmousemove event ==== */
document.onmousemove = function(e){
if(window.event) e=window.event;
xm = (e.x || e.clientX);
ym = (e.y || e.clientY);
}/* ==== window resize ==== */
function resize() {
if(diapo)diapo.resize();
}
onresize = resize;/* ==== opacity ==== */
setOpacity = function(o, alpha){
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
////////////////////////////////////////////////////////////////////////////////////////////
/* ===== encapsulate script ==== */
diapo = {
O : [],
DC : 0,
img : 0,
txt : 0,
N : 0,
xm : 0,
ym : 0,
nx : 0,
ny : 0,
nw : 0,
nh : 0,
rs : 0,
rsB : 0,
zo : 0,
tx_pos : 0,
tx_var : 0,
tx_target : 0,/////// script parameters ////////
attraction : 2,
acceleration : .9,
dampening : .1,
zoomOver : 2,
zoomClick : 6,
transparency : .8,
font_size: 18,
///////////////////////////////////* ==== diapo resize ==== */
resize : function(){
with(this){
nx = DC.offsetLeft;
ny = DC.offsetTop;
nw = DC.offsetWidth;
nh = DC.offsetHeight;
txt.style.fontSize = Math.round(nh / font_size) + "px";
if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
rsB = rs;
}
},/* ==== create diapo ==== */
CDiapo : function(o){
/* ==== create thumbnail image ==== */
  this.img = document.createElement("img");
  this.img.className = "imgDC";
  this.img.src = o.src;
  this.img.rel = o.getAttribute("rel");   /* ==== init variables ==== */
this.o = o;
this.x_pos = this.y_pos = 0;
this.x_origin = this.y_origin = 0;
this.x_var = this.y_var = 0;
this.x_target = this.y_target = 0;
this.w_pos = this.h_pos = 0;
this.w_origin = this.h_origin = 0;
this.w_var = this.h_var = 0;
this.w_target = this.h_target = 0;
this.over = false;
this.click = false;/* ==== create shadow ==== */
this.spa = document.createElement("span");
this.spa.className = "spaDC";
diapo.DC.appendChild(this.spa);/* ==== create thumbnail image ==== */
this.img = document.createElement("img");
this.img.className = "imgDC";
this.img.src = o.src;
this.img.O = this;
diapo.DC.appendChild(this.img);
setOpacity(this.img, diapo.transparency);/* ==== mouse events ==== */
this.img.onselectstart = new Function("return false;");
this.img.ondrag = new Function("return false;");
this.img.onmouseover = function(){
diapo.tx_target=0;
diapo.txt.innerHTML=this.O.o.alt;
this.O.over=true;
setOpacity(this,this.O.click?diapo.transparency:1);
}
this.img.onmouseout = function(){
diapo.tx_target=-diapo.nw;
this.O.over=false;
setOpacity(this,diapo.transparency);
}
this.img.onclick = function() {
window.location.href = this.rel;
} 
{/*
if(!this.O.click){
if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
this.O.click = true;
this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
diapo.zo = this;
setOpacity(this,diapo.transparency);
} else {
this.O.click = false;
this.O.over = false;
this.O.resize();
diapo.zo = 0;
}*/
}/* ==== rearrange thumbnails based on "imgsrc" images position ==== */
this.resize = function (){
with (this) {
x_origin = o.offsetLeft;
y_origin = o.offsetTop;
w_origin = o.offsetWidth;
h_origin = o.offsetHeight;
}
}/* ==== animation function ==== */
this.position = function (){
with (this) {
/* ==== set target position ==== */
w_target = w_origin;
h_target = h_origin;
if(over){
/* ==== mouse over ==== */
w_target = w_origin * diapo.zoomOver;
h_target = h_origin * diapo.zoomOver;
x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
} else {
/* ==== mouse out ==== */
x_target = x_origin;
y_target = y_origin;
}
if(click){
/* ==== clicked ==== */
w_target = w_origin * diapo.zoomClick;
h_target = h_origin * diapo.zoomClick;
}/* ==== magic spring equations ==== */
x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
diapo.rs += (Math.abs(x_var) + Math.abs(y_var));/* ==== html animation ==== */
with(img.style){
left = Math.round(x_pos) + "px";
top = Math.round(y_pos) + "px";
width = Math.round(Math.max(0, w_pos)) + "px";
height = Math.round(Math.max(0, h_pos)) + "px";
zIndex = Math.round(w_pos);
}
with(spa.style){
left = Math.round(x_pos + w_pos * .1) + "px";
top = Math.round(y_pos + h_pos * .1) + "px";
width = Math.round(Math.max(0, w_pos * 1.1)) + "px";
height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
zIndex = Math.round(w_pos);
}
}
}
},/* ==== main loop ==== */
run : function(){
diapo.xm = xm - diapo.nx;
diapo.ym = ym - diapo.ny;
/* ==== caption anim ==== */
diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
/* ==== images anim ==== */
for(var i in diapo.O) diapo.O[i].position();
/* ==== loop ==== */
setTimeout("diapo.run();", 16);
},/* ==== load images ==== */
images_load : function(){
// ===== loop until all images are loaded =====
var M = 0;
for(var i=0; i<diapo.N; i++) {
if(diapo.img[i].complete) {
diapo.img[i].style.position = "relative";
diapo.O[i].img.style.visibility = "visible";
diapo.O[i].spa.style.visibility = "visible";
M++;
}
resize();
}
if(M<diapo.N) setTimeout("diapo.images_load();", 128);
},/* ==== init script ==== */
init : function() {
diapo.DC = document.getElementById("diapoContainer");
diapo.img = diapo.DC.getElementsByTagName("img");
diapo.txt = document.getElementById("caption");
diapo.N = diapo.img.length;
for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
diapo.resize();
diapo.tx_pos = -diapo.nw;
diapo.tx_target = -diapo.nw;
diapo.images_load();
diapo.run();
}
}</script>
</head><body><div id="diapoContainer">
<img class="imgsrc" src="images/08081201001.jpg" alt="Reconsider your Existence" rel="http://www.sina.com">
<img class="imgsrc" src="images/08081201004.jpg" alt="Something Needs to be Discovered">
<img class="imgsrc" src="images/08081201005.jpg" alt="They Said Very Little">
<img class="imgsrc" src="images/08081201006.jpg" alt="Only in Your Mind">
<img class="imgsrc" src="images/08081201011.jpg" alt="The Power of Imagination">
<img class="imgsrc" src="images/08081201012.jpg" alt="Objectivity is Impossible">
<img class="imgsrc" src="images/08081201013.jpg" alt="Cleaning Up Operation">
<img class="imgsrc" src="images/08081201014.jpg" alt="Arbitrary Contents">
<div id="bkgcaption">
</div>
<div id="caption">
</div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
function dom_onload() {
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
</script></body></html>

解决方案 »

  1.   

    http://topic.csdn.net/u/20090618/10/3e68879e-621e-4777-9d93-c756ee1f38a8.html按照这里的方法试验了不好用 总是显示网页无法找到
      

  2.   

    我想把图片链接到index.html页面上，路过的高手指点一下，十分感谢哦，我试了很多次了 都连不上
      

  3.   

    等解决的方法~想把图片超链到index.html但是按照上个方法没实现
      

  4.   

    楼主 你图片的src写对了吗 换成绝对路径试试
      

  5.   


        <script type="text/javascript">
            
                /* ==== create diapo ==== */
                CDiapo: function (o) {
                    /* ==== create thumbnail image ==== */
                    
                                   /* ==== init variables ==== */
                    this.o = o;
                    this.x_pos = this.y_pos = 0;
                    this.x_origin = this.y_origin = 0;
                    this.x_var = this.y_var = 0;
                    this.x_target = this.y_target = 0;
                    this.w_pos = this.h_pos = 0;
                    this.w_origin = this.h_origin = 0;
                    this.w_var = this.h_var = 0;
                    this.w_target = this.h_target = 0;
                    this.over = false;
                    this.click = false;                /* ==== create shadow ==== */
                    this.spa = document.createElement("span");
                    this.spa.className = "spaDC";
                    diapo.DC.appendChild(this.spa);                /* ==== create thumbnail image ==== */
                    this.img = document.createElement("img");
                    this.img.className = "imgDC";
                    this.img.src = o.src;
                    this.img.rel = o.getAttribute("rel");
                    this.img.O = this;
                    diapo.DC.appendChild(this.img);
                    setOpacity(this.img, diapo.transparency);                /* ==== mouse events ==== */
                    this.img.onselectstart = new Function("return false;");
                    this.img.ondrag = new Function("return false;");
                    this.img.onmouseover = function () {
                        diapo.tx_target = 0;
                        diapo.txt.innerHTML = this.O.o.alt;
                        this.O.over = true;
                        setOpacity(this, this.O.click ? diapo.transparency : 1);
                    }
                    this.img.onmouseout = function () {
                        diapo.tx_target = -diapo.nw;
                        this.O.over = false;
                        setOpacity(this, diapo.transparency);
                    }
                    this.img.onclick = function () {
                        window.location.href = this.rel;
                    }
                                    /* ==== rearrange thumbnails based on "imgsrc" images position ==== */
                    this.resize = function () {
                        with (this) {
                            x_origin = o.offsetLeft;
                            y_origin = o.offsetTop;
                            w_origin = o.offsetWidth;
                            h_origin = o.offsetHeight;
                        }
                    }                /* ==== animation function ==== */
                    this.position = function () {
                        with (this) {
                            /* ==== set target position ==== */
                            w_target = w_origin;
                            h_target = h_origin;
                            if (over) {
                                /* ==== mouse over ==== */
                                w_target = w_origin * diapo.zoomOver;
                                h_target = h_origin * diapo.zoomOver;
                                x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction * (click ? 10 : 1));
                                y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction * (click ? 10 : 1));
                            } else {
                                /* ==== mouse out ==== */
                                x_target = x_origin;
                                y_target = y_origin;
                            }
                            if (click) {
                                /* ==== clicked ==== */
                                w_target = w_origin * diapo.zoomClick;
                                h_target = h_origin * diapo.zoomClick;
                            }                        /* ==== magic spring equations ==== */
                            x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
                            y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
                            w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
                            h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
                            diapo.rs += (Math.abs(x_var) + Math.abs(y_var));                        /* ==== html animation ==== */
                            with (img.style) {
                                left = Math.round(x_pos) + "px";
                                top = Math.round(y_pos) + "px";
                                width = Math.round(Math.max(0, w_pos)) + "px";
                                height = Math.round(Math.max(0, h_pos)) + "px";
                                zIndex = Math.round(w_pos);
                            }
                            with (spa.style) {
                                left = Math.round(x_pos + w_pos * .1) + "px";
                                top = Math.round(y_pos + h_pos * .1) + "px";
                                width = Math.round(Math.max(0, w_pos * 1.1)) + "px";
                                height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
                                zIndex = Math.round(w_pos);
                            }
                        }
                    }
                },            /* ==== main loop ==== */
                run: function () {
                    diapo.xm = xm - diapo.nx;
                    diapo.ym = ym - diapo.ny;
                    /* ==== caption anim ==== */
                    diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
                    diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
                    /* ==== images anim ==== */
                    for (var i in diapo.O) diapo.O[i].position();
                    /* ==== loop ==== */
                    setTimeout("diapo.run();", 16);
                },            /* ==== load images ==== */
                images_load: function () {
                    // ===== loop until all images are loaded =====
                    var M = 0;
                    for (var i = 0; i < diapo.N; i++) {
                        if (diapo.img[i].complete) {
                            diapo.img[i].style.position = "relative";
                            diapo.O[i].img.style.visibility = "visible";
                            diapo.O[i].spa.style.visibility = "visible";
                            M++;
                        }
                        resize();
                    }
                    if (M < diapo.N) setTimeout("diapo.images_load();", 128);
                },            /* ==== init script ==== */
                init: function () {
                    diapo.DC = document.getElementById("diapoContainer");
                    diapo.img = diapo.DC.getElementsByTagName("img");
                    diapo.txt = document.getElementById("caption");
                    diapo.N = diapo.img.length;
                    for (i = 0; i < diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
                    diapo.resize();
                    diapo.tx_pos = -diapo.nw;
                    diapo.tx_target = -diapo.nw;
                    diapo.images_load();
                    diapo.run();
                }
            }    </script>
    </head>
    <body>
        <div id="diapoContainer">
            <img class="imgsrc" src="images/1.jpg" alt="Reconsider your Existence"
                rel="http://www.sina.com">
            <img class="imgsrc" src="images/1.jpg" alt="Something Needs to be Discovered">
            <img class="imgsrc" src="images/1.jpg" alt="They Said Very Little">
            <img class="imgsrc" src="images/1.jpg" alt="Only in Your Mind">
            <img class="imgsrc" src="images/1.jpg" alt="The Power of Imagination">
            <img class="imgsrc" src="images/1.jpg" alt="Objectivity is Impossible">
            <img class="imgsrc" src="images/1.jpg" alt="Cleaning Up Operation">
            <img class="imgsrc" src="images/1.jpg" alt="Arbitrary Contents">
            <div id="bkgcaption">
            </div>
            <div id="caption">
            </div>
        </div>
        <script type="text/javascript">
            /* ==== start script ==== */
            function dom_onload() {
                if (document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
            }
            dom_onload();
        </script>
    创建图片写重复了。。我已经给你改过了/
      

  6.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>超酷超绚精美图片展示效果代码(三) - 网页特效观止-网页特效代码|JsCode.CN|</title>
        <style type="text/css">
            html
            {
                overflow: hidden;
            }
            
            body
            {
                margin: 0px;
                padding: 0px;
                background: #000;
                position: absolute;
                width: 100%;
                height: 100%;
                cursor: crosshair;
            }
            
            #diapoContainer
            {
                position: absolute;
                left: 10%;
                top: 10%;
                width: 80%;
                height: 80%;
                background: #222;
                overflow: hidden;
            }
            
            .imgDC
            {
                position: absolute;
                cursor: pointer;
                border: #000 solid 2px;
                filter: alpha(opacity=90);
                opacity: 0.9;
                visibility: hidden;
            }
            
            .spaDC
            {
                position: absolute;
                filter: alpha(opacity=20);
                opacity: 0.2;
                background: #000;
                visibility: hidden;
            }
            
            .imgsrc
            {
                position: absolute;
                width: 120px;
                height: 67px;
                visibility: hidden;
                margin: 4%;
            }
            
            #bkgcaption
            {
                position: absolute;
                bottom: 0px;
                left: 0px;
                width: 100%;
                height: 6%;
                background: #1a1a1a;
            }
            #caption
            {
                position: absolute;
                font-family: arial, helvetica, verdana, sans-serif;
                white-space: nowrap;
                color: #fff;
                bottom: 0px;
                width: 100%;
                left: -10000px;
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            var xm;
            var ym;        /* ==== onmousemove event ==== */
            document.onmousemove = function (e) {
                if (window.event) e = window.event;
                xm = (e.x || e.clientX);
                ym = (e.y || e.clientY);
            }        /* ==== window resize ==== */
            function resize() {
                if (diapo) diapo.resize();
            }
            onresize = resize;        /* ==== opacity ==== */
            setOpacity = function (o, alpha) {
                if (o.filters) o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
            }
            ////////////////////////////////////////////////////////////////////////////////////////////
            /* ===== encapsulate script ==== */
            diapo = {
                O: [],
                DC: 0,
                img: 0,
                txt: 0,
                N: 0,
                xm: 0,
                ym: 0,
                nx: 0,
                ny: 0,
                nw: 0,
                nh: 0,
                rs: 0,
                rsB: 0,
                zo: 0,
                tx_pos: 0,
                tx_var: 0,
                tx_target: 0,            /////// script parameters ////////
                attraction: 2,
                acceleration: .9,
                dampening: .1,
                zoomOver: 2,
                zoomClick: 6,
                transparency: .8,
                font_size: 18,
                //////////////////////////////////            /* ==== diapo resize ==== */
                resize: function () {
                    with (this) {
                        nx = DC.offsetLeft;
                        ny = DC.offsetTop;
                        nw = DC.offsetWidth;
                        nh = DC.offsetHeight;
                        txt.style.fontSize = Math.round(nh / font_size) + "px";
                        if (Math.abs(rs - rsB) < 100) for (var i = 0; i < N; i++) O[i].resize();
                        rsB = rs;
                    }
                },
      

  7.   


    /* ==== create diapo ==== */
                CDiapo: function (o) {
                    /* ==== create thumbnail image ==== */
                    
                                   /* ==== init variables ==== */
                    this.o = o;
                    this.x_pos = this.y_pos = 0;
                    this.x_origin = this.y_origin = 0;
                    this.x_var = this.y_var = 0;
                    this.x_target = this.y_target = 0;
                    this.w_pos = this.h_pos = 0;
                    this.w_origin = this.h_origin = 0;
                    this.w_var = this.h_var = 0;
                    this.w_target = this.h_target = 0;
                    this.over = false;
                    this.click = false;                /* ==== create shadow ==== */
                    this.spa = document.createElement("span");
                    this.spa.className = "spaDC";
                    diapo.DC.appendChild(this.spa);                /* ==== create thumbnail image ==== */
                    this.img = document.createElement("img");
                    this.img.className = "imgDC";
                    this.img.src = o.src;
                    this.img.rel = o.getAttribute("rel");
                    this.img.O = this;
                    diapo.DC.appendChild(this.img);
                    setOpacity(this.img, diapo.transparency);                /* ==== mouse events ==== */
                    this.img.onselectstart = new Function("return false;");
                    this.img.ondrag = new Function("return false;");
                    this.img.onmouseover = function () {
                        diapo.tx_target = 0;
                        diapo.txt.innerHTML = this.O.o.alt;
                        this.O.over = true;
                        setOpacity(this, this.O.click ? diapo.transparency : 1);
                    }
                    this.img.onmouseout = function () {
                        diapo.tx_target = -diapo.nw;
                        this.O.over = false;
                        setOpacity(this, diapo.transparency);
                    }
                    this.img.onclick = function () {
                        window.location.href = this.rel;
                    }
                                    /* ==== rearrange thumbnails based on "imgsrc" images position ==== */
                    this.resize = function () {
                        with (this) {
                            x_origin = o.offsetLeft;
                            y_origin = o.offsetTop;
                            w_origin = o.offsetWidth;
                            h_origin = o.offsetHeight;
                        }
                    }                /* ==== animation function ==== */
                    this.position = function () {
                        with (this) {
                            /* ==== set target position ==== */
                            w_target = w_origin;
                            h_target = h_origin;
                            if (over) {
                                /* ==== mouse over ==== */
                                w_target = w_origin * diapo.zoomOver;
                                h_target = h_origin * diapo.zoomOver;
                                x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction * (click ? 10 : 1));
                                y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction * (click ? 10 : 1));
                            } else {
                                /* ==== mouse out ==== */
                                x_target = x_origin;
                                y_target = y_origin;
                            }
                            if (click) {
                                /* ==== clicked ==== */
                                w_target = w_origin * diapo.zoomClick;
                                h_target = h_origin * diapo.zoomClick;
                            }                        /* ==== magic spring equations ==== */
                            x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
                            y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
                            w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
                            h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
                            diapo.rs += (Math.abs(x_var) + Math.abs(y_var));                        /* ==== html animation ==== */
                            with (img.style) {
                                left = Math.round(x_pos) + "px";
                                top = Math.round(y_pos) + "px";
                                width = Math.round(Math.max(0, w_pos)) + "px";
                                height = Math.round(Math.max(0, h_pos)) + "px";
                                zIndex = Math.round(w_pos);
                            }
                            with (spa.style) {
                                left = Math.round(x_pos + w_pos * .1) + "px";
                                top = Math.round(y_pos + h_pos * .1) + "px";
                                width = Math.round(Math.max(0, w_pos * 1.1)) + "px";
                                height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
                                zIndex = Math.round(w_pos);
                            }
                        }
                    }
                },            /* ==== main loop ==== */
                run: function () {
                    diapo.xm = xm - diapo.nx;
                    diapo.ym = ym - diapo.ny;
                    /* ==== caption anim ==== */
                    diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
                    diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
                    /* ==== images anim ==== */
                    for (var i in diapo.O) diapo.O[i].position();
                    /* ==== loop ==== */
                    setTimeout("diapo.run();", 16);
                },            /* ==== load images ==== */
                images_load: function () {
                    // ===== loop until all images are loaded =====
                    var M = 0;
                    for (var i = 0; i < diapo.N; i++) {
                        if (diapo.img[i].complete) {
                            diapo.img[i].style.position = "relative";
                            diapo.O[i].img.style.visibility = "visible";
                            diapo.O[i].spa.style.visibility = "visible";
                            M++;
                        }
                        resize();
                    }
                    if (M < diapo.N) setTimeout("diapo.images_load();", 128);
                },            /* ==== init script ==== */
                init: function () {
                    diapo.DC = document.getElementById("diapoContainer");
                    diapo.img = diapo.DC.getElementsByTagName("img");
                    diapo.txt = document.getElementById("caption");
                    diapo.N = diapo.img.length;
                    for (i = 0; i < diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
                    diapo.resize();
                    diapo.tx_pos = -diapo.nw;
                    diapo.tx_target = -diapo.nw;
                    diapo.images_load();
                    diapo.run();
                }
            }    </script>
    </head>
    <body>
        <div id="diapoContainer">
            <img class="imgsrc" src="images/1.jpg" alt="Reconsider your Existence"
                rel="http://www.sina.com">
            <img class="imgsrc" src="images/1.jpg" alt="Something Needs to be Discovered">
            <img class="imgsrc" src="images/1.jpg" alt="They Said Very Little">
            <img class="imgsrc" src="images/1.jpg" alt="Only in Your Mind">
            <img class="imgsrc" src="images/1.jpg" alt="The Power of Imagination">
            <img class="imgsrc" src="images/1.jpg" alt="Objectivity is Impossible">
            <img class="imgsrc" src="images/1.jpg" alt="Cleaning Up Operation">
            <img class="imgsrc" src="images/1.jpg" alt="Arbitrary Contents">
            <div id="bkgcaption">
            </div>
            <div id="caption">
            </div>
        </div>
        <script type="text/javascript">
            /* ==== start script ==== */
            function dom_onload() {
                if (document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
            }
            dom_onload();
        </script>
    </body>
    </html>
    这是完整代码