JS图片代码切换总汇

（1）

（2）兼容多种浏览器js图片切换

（3）

（4）

（5）

<!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" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>精美图片展示效果代码一，sky整理收集，站长特效网欢迎您。</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
    overflow: hidden;
}
body {
    margin: 0px;
    padding: 0px;
    background: #000;
    100%;
    height: 100%;
}
#imageFlow {
    position: absolute;
    100%;
    height: 80%;
    left: 0%;
    top: 10%;
    background: #000;
}
#imageFlow .diapo {
    position: absolute;
    left: -1000px;
    cursor: pointer;
    -ms-interpolation-mode: nearest-neighbor;
}
#imageFlow .link {
    border: dotted #fff 1px;
    margin-left: -1px;
    margin-bottom: -1px;
}
#imageFlow .bank {
    visibility: hidden;
}
#imageFlow .top {
    position: absolute;
    100%;
    height: 40%;
    background: #181818;
}
#imageFlow .text {
    position: absolute;
    left: 0px;
    100%;
    bottom: 16%;
    text-align: center;
    color: #FFF;
    font-family: verdana, arial, Helvetica, sans-serif;
    z-index: 1000;
}
#imageFlow .title {
    font-size: 0.9em;
    font-weight: bold;
}
#imageFlow .legend {
    font-size: 0.8em;
}
#imageFlow .scrollbar {
    position: absolute;
    left: 10%;
    bottom: 10%;
    80%;
    height: 16px;
    z-index: 1000;
}
#imageFlow .track {
    position: absolute;
    left: 1%;
    98%;
    height: 16px;
    filter: alpha(opacity=30);
    opacity: 0.3;
}
#imageFlow .arrow-left {
    position: absolute;
}
#imageFlow .arrow-right {
    position: absolute;
    right: 0px;
}
#imageFlow .bar {
    position: absolute;
    height: 16px;
    left: 25px;
}
</style>
<script type="text/javascript">
var imf = function () {
var lf = 0;
var instances = [];
function getElementsByClass (object, tag, className) {
    var o = object.getElementsByTagName(tag);
    for ( var i = 0, n = o.length, ret = []; i < n; i++)
        if (o[i].className == className) ret.push(o[i]);
    if (ret.length == 1) ret = ret[0];
    return ret;
}
function addEvent (o, e, f) {
    if (window.addEventListener) o.addEventListener(e, f, false);
    else if (window.attachEvent) r = o.attachEvent('on' + e, f);
}
function createReflexion (cont, img) {
    var flx = false;
    if (document.createElement("canvas").getContext) {
        flx = document.createElement("canvas");
        flx.width = img.width;
        flx.height = img.height;
        var context = flx.getContext("2d");
        context.translate(0, img.height);
        context.scale(1, -1);
        context.drawImage(img, 0, 0, img.width, img.height);
        context.globalCompositeOperation = "destination-out";
        var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
        gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
        gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
        context.fillStyle = gradient;
        context.fillRect(0, 0, img.width, img.height * 2);
    } else {
        /* ---- DXImageTransform ---- */
        flx     = document.createElement('img');
        flx.src = img.src;
        flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' + 'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
                           (img.height * .25) + ')';
    }
    /* ---- insert Reflexion ---- */
    flx.style.position = 'absolute';
    flx.style.left     = '-1000px';
    cont.appendChild(flx);
    return flx;
}
/* //////////// ==== ImageFlow Constructor ==== //////////// */
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'
        );
    }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
    /* ==== 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);
    }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
/* //////////// ==== 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'; }
    }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
/* //////////// ==== Diapo prototype ==== //////////// */
Diapo.prototype = {
    /* ==== HTML rendering ==== */
    move : function (res) {
        if (this.loaded) {
        var sx = this.x1 - this.x0;
            var sw = this.w1 - this.w0;
            if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
                /* ---- paint only when moving ---- */
                this.x0 += sx * .1;
                this.w0 += sw * .1;
                if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
                    /* ---- paint only visible images ---- */
                    this.visible = true;
                    var o = this.img.style;
                    var h = this.w0 * this.r;
                    /* ---- diapo ---- */
                    o.left   = Math.round(this.x0) + 'px';
                    o.bottom = Math.floor(this.parent.ht * .25) + 'px';
                    o.width = Math.round(this.w0) + 'px';
                    o.height = Math.round(h) + 'px';
                    /* ---- reflexion ---- */
                    if (this.flx) {
                        var o = this.flx.style;
                        o.left   = Math.round(this.x0) + 'px';
                        o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';
                        o.width = Math.round(this.w0) + 'px';
                        o.height = Math.round(h) + 'px';
                    }
                } else {
                    /* ---- disable invisible images ---- */
                    if (this.visible) {
                        this.visible = false;
                        this.img.style.width = '0px';
                        if (this.flx) this.flx.style.width = '0px';
                    }
                }
            }
        } else {
            /* ==== image onload ==== */
            if (this.img.complete && this.img.width) {
                /* ---- get size image ---- */
                this.iw     = this.img.width;
                this.ih     = this.img.height;
                this.r      = this.ih / this.iw;
                this.loaded = true;
                /* ---- create reflexion ---- */
                this.flx    = createReflexion(this.parent.oc, this.img);
                if (this.parent.view < 0) this.parent.view = this.N;
                this.parent.calc();
            }
        }
    },
    /* ==== diapo onclick ==== */
    click : function () {
        if (this.parent.view == this.N) {
            /* ---- click on zoomed diapo ---- */
            if (this.url) {
                /* ---- open hyperlink ---- */
                window.open(this.url, this.target);
            } else {
                /* ---- zoom in/out ---- */
                this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
                this.parent.calc();
            }
        } else {
            /* ---- select diapo ---- */
            this.parent.view = this.N;
            this.parent.calc();
        }
        return false;
    }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
/* //////////// ==== public methods ==== //////////// */
return {
    /* ==== initialize script ==== */
    create : function (div, size, zoom, border) {
        /* ---- instanciate imageFlow ---- */
        var load = function () {
            var loaded = false;
            var i = instances.length;
            while (i--) if (instances[i].oCont == div) loaded = true;
            if (!loaded) {
                /* ---- push new imageFlow instance ---- */
                instances.push(
                    new ImageFlow(div, size, zoom, border)
                );
                /* ---- init script (once) ---- */
                if (!imf.initialized) {
                    imf.initialized = true;
                    /* ---- window resize event ---- */
                    addEvent(window, 'resize', function () {
                        var i = instances.length;
                        while (i--) instances[i].resize();
                    });
                    /* ---- stop drag N drop ---- */
                    addEvent(document.getElementById(div), 'mouseout', function (e) {
                        if (!e) e = window.event;
                        var tg = e.relatedTarget || e.toElement;
                        if (tg && tg.tagName == 'HTML') {
                            var i = instances.length;
                            while (i--) instances[i].oc.onmousemove = null;
                        }
                        return false;
                    });
                    /* ---- set interval loop ---- */
                    setInterval(function () {
                        var i = instances.length;
                        while (i--) instances[i].run();
                    }, 16);
                }
            }
        }
        /* ---- window onload event ---- */
        addEvent(window, 'load', function () { load(); });
    }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
}();
/* ==== create imageFlow ==== */
//          div ID    , size, zoom, border
imf.create("imageFlow", 0.15, 1.5, 10);
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div id="imageFlow">
<div class="top">
</div>
<div class="bank">
    <a rel="/img/2010_zzjs_net_1.jpg" title="站长特效一号图片" href="http://www.zzjs.net/">站长特效网，打造国内最帅的网页特效站。</a>
    <a rel="/img/2010_zzjs_net_2.jpg" title="站长特效二号图片" href="http://www.zzjs.net/">专注于网页特效几广告代码，供站长和js爱好者参考。</a>
    <a rel="/img/2010_zzjs_net_3.jpg" title="站长特效三号图片" href="http://zzjs.net/">我们的域名是www.zzjs.net</a>
    <a rel="/img/2010_zzjs_net_4.jpg" title="站长特效四号图片" href="http://www.zzjs.net/">欢迎您的光临</a>
    <a rel="/img/2010_zzjs_net_5.jpg" title="站长特效五号图片" href="http://www.zzjs.net/">觉得不错就收藏本站吧</a>
    <a rel="/img/2010_zzjs_net_6.jpg" title="站长特效六号图片" href="http://www.zzjs.net/">我们追求的是质量，不是数量</a>
    <a rel="/img/2010_zzjs_net_7.jpg" title="站长特效七号图片" href="http://www.zzjs.net/">站长特效，有你更精彩。</a>
    <a rel="/img/2010_zzjs_net_8.jpg" title="站长特效八号图片" href="http://www.zzjs.net/">您的支持，是我们的动力</a>
    <a rel="/img/2010_zzjs_net_9.jpg" title="站长特效九号图片" href="http://zzjs.net/">十年打造极品站</a>
    <a rel="/img/2010_zzjs_net_10.jpg" title="站长特效十号图片" href="http://www.zzjs.net/">站长特效，zzjs，简单好记的域名，.net也精彩。</a>
    <a rel="/img/2010_zzjs_net_11.jpg" title="站长特效十一号图片" href="http://www.zzjs.net/">如果您喜欢，也可以把本站设为主页</a>
    <a rel="/img/2010_zzjs_net_12.jpg" title="站长特效十二号图片" href="http://www.zzjs.net/">推荐给需要的朋友吧，或许他们正在苦苦寻找这些东西。</a>
    <a rel="/img/2010_zzjs_net_13.jpg" title="站长特效十三号图片" href="http://www.zzjs.net/">欢迎下次再来，zzjs.net</a>
    <a rel="/img/2010_zzjs_net_14.jpg" title="站长特效十四号图片" href="http://www.zzjs.net/">站长特效，我们永不言败</a> </div>
<div class="text">
    <div class="title">
        Loading</div>
    <div class="legend">
        Please wait...</div>
</div>
<div class="scrollbar">
    <img class="track" src="/img/2010_zzjs_net_15.gif" alt="">
    <img class="arrow-left" src="/img/2010_zzjs_net_16.gif" alt="">
    <img class="arrow-right" src="/img/2010_zzjs_net_17.gif" alt="">
    <img class="bar" src="/img/2010_zzjs_net_18.gif" alt=""> </div>
</div>
</body>
</html>

（6）

（7）

（8）

（9）

（10）