图片不循环，在线等。。。

<script type="text/javascript">
function ImageFlow(oCont, size, zoom, border) {
this.diapos     = [];
this.scr        = false;
this.size       = size;
this.zoom       = zoom;
this.bdw        = border;
this.oCont      = oCont;
this.oc         = document.getElementById(oCont);
this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar');
this.text       = getElementsByClass(this.oc,   'div', 'text');
this.title      = getElementsByClass(this.text, 'div', 'title');
this.legend     = getElementsByClass(this.text, 'div', 'legend');
this.bar        = getElementsByClass(this.oc,   'img', 'bar');
this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left');
this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right');
this.bw         = this.bar.width;
this.alw        = this.arL.width - 5;
this.arw        = this.arR.width - 5;
this.bar.parent = this.oc.parent  = this;
this.arL.parent = this.arR.parent = this;
this.view       = this.back       = -1;
this.resize();
this.oc.onselectstart = function () { return false; }
/* ---- create images ---- */
var img   = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
this.NF = img.length;
for (var i = 0, o; o = img[i]; i++) {
this.diapos[i] = new Diapo(this, i,
o.rel,
o.title || '- ' + i + ' -',
o.innerHTML || o.rel,
o.href || '',
o.target || '_self'
);
}
/* ==== add mouse wheel events ==== */
if (window.addEventListener)
this.oc.addEventListener('DOMMouseScroll', function(e) {
this.parent.scroll(-e.detail);
}, false);
else this.oc.onmousewheel = function () {
this.parent.scroll(event.wheelDelta);
}
/* ==== scrollbar drag N drop ==== */
this.bar.onmousedown = function (e) {
if (!e) e = window.event;
var scl = e.screenX - this.offsetLeft;
var self = this.parent;
/* ---- move bar ---- */
this.parent.oc.onmousemove = function (e) {
if (!e) e = window.event;
self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
if (self.view != self.back) self.calc();
return false;
}
/* ---- release scrollbar ---- */
this.parent.oc.onmouseup = function (e) {
self.oc.onmousemove = null;
return false;
}
return false;
}
/* ==== right arrow ==== */
this.arR.onclick = this.arR.ondblclick = function () {
if (this.parent.view < this.parent.NF - 1)
this.parent.calc(1);
}
/* ==== Left arrow ==== */
this.arL.onclick = this.arL.ondblclick = function () {
if (this.parent.view > 0)
this.parent.calc(-1);
}
}
/* //////////// ==== ImageFlow prototype ==== //////////// */
ImageFlow.prototype = {
/* ==== targets ==== */
calc : function (inc) {
if (inc) this.view += inc;
var tw = 0;
var lw = 0;
var o = this.diapos[this.view];
if (o && o.loaded) {
/* ---- reset ---- */
var ob = this.diapos[this.back];
if (ob && ob != o) {
ob.img.className = 'diapo';
ob.z1 = 1;
}
/* ---- update legend ---- */
this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
/* ---- update hyperlink ---- */
if (o.url) {
o.img.className = 'diapo link';
window.status = 'hyperlink: ' + o.url;
} else {
o.img.className = 'diapo';
window.status = '';
}
/* ---- calculate target sizes & positions ---- */
o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
var x = x0 + o.w1 + this.bdw;
for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
if (o.loaded) {
o.x1 = x;
o.w1 = (this.ht / o.r) * this.size;
x   += o.w1 + this.bdw;
tw  += o.w1 + this.bdw;
}
}
x = x0 - this.bdw;
for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
if (o.loaded) {
o.w1 = (this.ht / o.r) * this.size;
o.x1 = x - o.w1;
x   -= o.w1 + this.bdw;
tw  += o.w1 + this.bdw;
lw  += o.w1 + this.bdw;
}
}
/* ---- move scrollbar ---- */
if (!this.scr && tw) {
var r = (this.ws - this.alw - this.arw - this.bw) / tw;
this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
}
/* ---- save preview view ---- */
this.back = this.view;
}
},
/* ==== mousewheel scrolling ==== */
scroll : function (sc) {
if (sc < 0) {
if (this.view < this.NF - 1) this.calc(1);
} else {
if (this.view > 0) this.calc(-1);
}
},
/* ==== resize  ==== */
resize : function () {
this.wh = this.oc.clientWidth;
this.ht = this.oc.clientHeight;
this.ws = this.scrollbar.offsetWidth;
this.calc();
this.run(true);
},
/* ==== move all images  ==== */
run : function (res) {
var i = this.NF;
while (i--) this.diapos[i].move(res);
}
}
/* //////////// ==== Diapo Constructor ==== //////////// */
Diapo = function (parent, N, src, title, text, url, target) {
this.parent        = parent;
this.loaded        = false;
this.title         = title;
this.text          = text;
this.url           = url;
this.target        = target;
this.N             = N;
this.img           = document.createElement('img');
this.img.src       = src;
this.img.parent    = this;
this.img.className = 'diapo';
this.x0            = this.parent.oc.clientWidth;
this.x1            = this.x0;
this.w0            = 0;
this.w1            = 0;
this.z1            = 1;
this.img.parent    = this;
this.img.onclick   = function() { this.parent.click(); }
this.parent.oc.appendChild(this.img);
/* ---- display external link ---- */
if (url) {
this.img.onmouseover = function () { this.className = 'diapo link'; }
this.img.onmouseout  = function () { this.className = 'diapo'; }
}
}
/* ==== create imageFlow ==== */
//          div ID    , size, zoom, border
imf.create("imageFlow", 0.15, 1.5, 10);</script>
</head><body> <div id="imageFlow">
<div class="top"></div>
<div class="bank">
<a rel="images/1.jpg" title="Myselves" href="http://www.lanrentuku.com/">My identity lies in not knowing who I am</a>
<a rel="images/2.jpg" title="Discoveries" href="http://www.lanrentuku.com/">...are made by not following instructions</a>
<a rel="images/3.jpg" title="Nothing" href="http://www.lanrentuku.com/">...can come between us</a>
<a rel="images/4.jpg" title="New life" href="http://www.lanrentuku.com/">Here you come!</a>
<a rel="images/ct81.jpg" title="Optimists" href="http://www.lanrentuku.com/">They don't know all the facts yet</a>
<a rel="images/ct134.jpg" title="Empathy" href="http://www.lanrentuku.com/">Emotional intimacy</a>
<a rel="images/ct41.jpg" title="Much work" href="http://www.lanrentuku.com/">...remains to be done before we can announce our total failure to make any progress</a>
<a rel="images/ct75.jpg" title="System error" href="http://www.lanrentuku.com/">Errare Programma Est</a>
<a rel="images/bl201.jpg" title="Nonexistance" href="http://www.lanrentuku.com/">There's no such thing</a>
<a rel="images/ct137.jpg" title="Inside" href="http://www.lanrentuku.com/">I抦 now trapped, without hope of escape or rescue</a>
<a rel="images/ct65.jpg" title="E-Slaves" href="http://www.lanrentuku.com/">The World is flat</a>
<a rel="images/or105.jpg" title="l0v3" href="http://www.lanrentuku.com/">1 l0v3 j00 - f0r3v3r</a>
<a rel="images/ct139.jpg" title="T minus zero" href="http://www.lanrentuku.com/">111 111 111 x 111 111 111 = 12345678987654321</a>
<a rel="images/ct27.jpg" title="The End" href="http://www.lanrentuku.com/">...has not been written yet</a>
</div>

</body>
</html>