今天我们要来分享一款基于jQuery的百叶窗焦点图插件，也可以说是图片滑块插件。这种jQuery焦点图插件的应用非常广泛，在早些年前，我们需要用flash来完成这种百叶窗的效果。如今我们可以用jQuery来实现这个动画效果。这款jQuery百叶窗焦点图不仅可以横向切换，也可以垂直切换，效果都非常不错。

你也可以在这里查看

下面我们来简单解说一下实现这款jQuery百叶窗焦点图的过程和代码，代码主要由HTML、CSS以及jQuery组成，实现比较简单。

HTML代码：

HTML代码非常简单，一个div中列出了3张图片，这3张图片到时候我们可以制作成百叶窗的切换效果。

CSS代码：

#slider {
       position: relative;    width: 600px;    overflow: hidden;    margin: 10px auto 30px auto;}#slider li {
       position: absolute;    top: 0;    left: 0;}.caption {
       opacity: 0.8;    background: #000;    height: 33px;    padding: 5px 0 0 0;    color: #fff;    text-align: center;    font: 25px/1 '微软雅黑';    z-index: 200;}.prev-link, .next-link {
       display: block;    width: 24px;    height: 24px;    background-repeat: no-repeat;    background-position: left top;    position: absolute;    bottom: 10px;    z-index: 300;}.prev-link {
       left: 10px;    background-image: url(prev.png );}.next-link {
       left: 40px;    background-image: url(next.png );}.circle {
       display: block;    width: 16px;    height: 16px;    background: url(circle-empty.png ) no-repeat left top;    position: absolute;    bottom: 10px;    z-index: 300;}.circle-current {
       background-image: url(circle-full.png );}

CSS代码也非常简单，设置背景的同时也设置了左右按钮箭头和切换图片的小圆点，只是利用了几张背景图片，并没有用复杂的CSS代码。

最后的jQuery代码才是关键，这才是实现百叶窗效果的核心代码。

jQuery代码：

(function(a) { (function() {        var b = false;        var c = (/xyz/.test(function() {            xyz        })) ? (/\b_super\b/) : (/.*/);        this.Class = function() {};        Class.extend = function(h) {            var g = this.prototype;            b = true;            var f = new this();            b = false;            for (var e in h) {                if (typeof h[e] == "function" && typeof g[e] == "function" && c.test(h[e])) {                    f[e] = (function(i, j) {                        return function() {                            var l = this._super;                            this._super = g[i];                            var k = j.apply(this, arguments);                            this._super = l;                            return k                        }                    })(e, h[e])                } else {                    f[e] = h[e]                }            }            function d() {                if (!b && this.init) {                    this.init.apply(this, arguments)                }            }            d.prototype = f;            d.constructor = d;            d.extend = arguments.callee;            return d        }    })();    a.fn.lateralSlider = function(b) {        var d = {            displayDuration: 2000,            animateDuration: 1500,            numColumns: 10,            transitions: "fade,slideUp,slideDown,slideLeft,slideRight,slideUpAndDown,slideLeftAndRight,fadeAndSlideUp,fadeAndSlideDown,fadeAndSlideLeft,fadeAndSlideRight,fadeSlideUpAndRight,fadeSlideDownAndLeft",            random: false,            hidePrevAndNextArrows: false,            hideSlideChooser: false,            captionOpacity: 0.8        };        var c = a.extend({},        d, b);        this.each(function() {            var j = a(this);            var t = Class.extend({                $imgs: null,                size: null,                displayImg: null,                nextImg: null,                numDivs: null,                divWidth: null,                baseCSS: null,                $divs: null,                transitions: [],                transition: null,                transitionCount: null,                interval: null,                width: null,                init: function() {                    this.$imgs = a("img", j);                    this.size = this.$imgs.size();                    this.$imgs.hide();                    this.nextImg = 0;                    this.width = j.width();                    this.numDivs = c.numColumns;                    this.divWidth = this.width / this.numDivs;                    this.baseCSS = {                        width: this.divWidth,                        position: "absolute",                        top: 0,                        backgroundRepeat: "no-repeat"                    };                    this.createDivs();                    this.$divs = a("div", j);                    this.transitionCount = -1                },                createDivs: function() {                    for (var A = 0; A < this.numDivs; A++) {                        var B = a("
     
");                        B.css(this.baseCSS);                        B.css("left", this.divWidth * A);                        B.appendTo(j)                    }                }            });            var y = new t();            var g = Class.extend({                baseDuration: null,                originalOffset: null,                offset: null,                init: function() {                    this.baseDuration = c.animateDuration / 8;                    this.originalOffset = 7 * c.animateDuration / (8 * y.numDivs);                    this.offset = 7 * c.animateDuration / (8 * y.numDivs)                },                duration: function() {                    return this.baseDuration + this.offset                },                increment: function() {                    this.offset += this.originalOffset                },                reset: function() {                    this.offset = this.originalOffset                },                getCSS: function(A) {                    return {}                },                eachDiv: function() {                    return {}                },                applyTransition: function() {                    y.$divs.each(this.eachDiv);                    this.reset()                }            });            var v = g.extend({                applyTransition: function() {                    var A = this;                    y.$divs.each(function() {                        var B = A.eachDiv;                        if (typeof(A.eachDiv) == "function") {                            B = B()                        }                        a(this).animate(B, A.duration());                        A.increment()                    });                    this.reset()                }            });            var m = v.extend({                getCSSIndex: null,                eachDivIndex: null,                getCSSGroup: null,                eachDivGroup: null,                init: function() {                    this._super();                    this.getCSSGroup = new Array();                    this.eachDivGroup = new Array();                    this.getCSSIndex = 0;                    this.eachDivIndex = 0                },                getCSS: function(B) {                    var A = this.getCSSGroup[this.getCSSIndex];                    this.getCSSIndex = (this.getCSSIndex + 1) % this.getCSSGroup.length;                    return A(B)                },                addTransition: function(A) {                    this.getCSSGroup.push(A.getCSS);                    this.eachDivGroup.push(A.eachDiv)                },                applyTransition: function() {                    var A = this;                    y.$divs.each(function() {                        var B = A.eachDivGroup[A.eachDivIndex];                        if (typeof(B) == "function") {                            B = B()                        }                        a(this).animate(B, A.duration());                        A.eachDivIndex = (A.eachDivIndex + 1) % A.eachDivGroup.length;                        A.increment()                    });                    this.reset()                }            });            var u = v.extend({                getCSS: function(A) {                    return {                        opacity: 0                    }                },                eachDiv: {                    opacity: 1                }            });            var f = v.extend({                getCSS: function(A) {                    return {                        top: y.$imgs.eq(y.nextImg).height()                    }                },                eachDiv: {                    top: 0                }            });            var h = v.extend({                getCSS: function(A) {                    return {                        height: 0                    }                },                eachDiv: function() {                    return {                        height: y.$imgs.eq(y.nextImg).height()                    }                }            });            var r = v.extend({                getCSS: function(B) {                    var A = B.css("left");                    A = parseInt(A.substring(0, A.length - 2), 10);                    return {                        left: A + y.divWidth,                        width: 0                    }                },                eachDiv: {                    left: "-=" + y.divWidth,                    width: y.divWidth                }            });            var q = v.extend({                getCSS: function(A) {                    return {                        width: 0                    }                },                eachDiv: {                    width: y.divWidth                }            });            var o = m.extend({                addTransitions: function(A, B) {                    this.addTransition(A);                    this.addTransition(B)                }            });            var w = m.extend({                addTransitions: function(B, A) {                    this.addTransition(B);                    this.addTransition(A)                }            });            var k = m.extend({                addTransitions: function(A, B) {                    this.addTransition(A);                    this.addTransition(B)                }            });            var n = m.extend({                addTransitions: function(A, B) {                    this.addTransition(A);                    this.addTransition(B)                }            });            var p = m.extend({                addTransitions: function(A, B) {                    this.addTransition(A);                    this.addTransition(B)                }            });            var e = m.extend({                addTransitions: function(A, B) {                    this.addTransition(A);                    this.addTransition(B)                }            });            var x = m.extend({                addTransitions: function(A, C, B) {                    this.addTransition(A);                    this.addTransition(C);                    this.addTransition(B)                }            });            var s = m.extend({                addTransitions: function(C, A, B) {                    this.addTransition(C);                    this.addTransition(A);                    this.addTransition(B)                }            });            var z = {                fade: new u(),                slideUp: new f(),                slideDown: new h(),                slideLeft: new r(),                slideRight: new q(),                slideUpAndDown: new o(),                slideLeftAndRight: new w(),                fadeAndSlideUp: new k(),                fadeAndSlideDown: new n(),                fadeAndSlideLeft: new p(),                fadeAndSlideRight: new e(),                fadeSlideUpAndRight: new x(),                fadeSlideDownAndLeft: new s()            };            z.slideUpAndDown.addTransitions(z.slideUp, z.slideDown);            z.slideLeftAndRight.addTransitions(z.slideLeft, z.slideRight);            z.fadeAndSlideUp.addTransitions(z.slideUp, z.fade);            z.fadeAndSlideDown.addTransitions(z.fade, z.slideDown);            z.fadeAndSlideLeft.addTransitions(z.fade, z.slideLeft);            z.fadeAndSlideRight.addTransitions(z.slideRight, z.fade);            z.fadeSlideUpAndRight.addTransitions(z.slideUp, z.fade, z.slideRight);            z.fadeSlideDownAndLeft.addTransitions(z.slideDown, z.fade, z.slideLeft);            t.prototype.populateTransitions = function() {                var B = c.transitions.split(/,\s*/g);                for (var A in B) {                    this.transitions.push(z[B[A]])                }            };            t.prototype.getTransition = function() {                if (c.random) {                    var A = Math.floor(Math.random() * this.transitions.length);                    return this.transitions[A]                } else {                    this.transitionCount = (this.transitionCount + 1) % this.transitions.length;                    return this.transitions[this.transitionCount]                }            };            t.prototype.addDivCSS = function() {                var B = this;                var C = B.$imgs.eq(B.nextImg);                var D = "url(" + C.attr("src") + ")";                var A = C.height();                this.$divs.each(function() {                    var E = a(this);                    E.css({                        backgroundImage: D,                        backgroundPosition: "-" + E.css("left") + " 0px",                        height: A                    });                    E.css(B.transition.getCSS(E))                })            };            t.prototype.process = function() {                j.css({                    backgroundImage: "url(" + this.$imgs.eq(this.displayImg).attr("src") + ")",                    backgroundRepeat: "no-repeat"                });                this.transition = this.getTransition();                this.addDivCSS();                this.transition.applyTransition();                j.animate({                    height: this.$imgs.eq(this.nextImg).height()                },                c.animateDuration);                this.advanceShow()            };            t.prototype.updateCurrent = function() {                a('.circle[rel="' + this.displayImg + '"]').removeClass("circle-current");                a('.circle[rel="' + this.nextImg + '"]').addClass("circle-current")            };            t.prototype.advanceShow = function() {                this.updateCurrent();                this.displayImg = this.nextImg;                if (this.nextImg == this.size - 1) {                    this.nextImg = 0                } else {                    this.nextImg++                }            };            t.prototype.startShow = function() {                this.interval = window.setInterval(a.proxy(this.runner, this), c.displayDuration + c.animateDuration)            };            t.prototype.stopShow = function() {                window.clearInterval(this.interval)            };            t.prototype.goToSlide = function(A) {                if (this.$divs.filter(":animated").size() > 0) {                    return                }                this.stopShow();                this.nextImg = A;                this.updateCurrent();                this.runner();                if (this.nextImg == 0) {                    this.displayImg = this.size - 1                } else {                    this.displayImg = this.nextImg - 1                }                this.startShow()            };            t.prototype.applyLink = function() {                var C = this.$imgs.eq(this.displayImg);                var B = C.parent();                if (B.is("a")) {                    B.removeAttr("style")                }                var A = this.$imgs.eq(this.nextImg);                var D = A.parent();                if (D.is("a")) {                    D.css({                        display: "block",                        textDecoration: "none",                        border: "0",                        width: j.width(),                        height: A.height(),                        position: "absolute",                        top: 0,                        left: 0,                        zIndex: 100                    })                }            };            t.prototype.applyCaption = function() {                var A = this.$imgs.eq(this.nextImg);                var C = A.attr("title");                var D = a(".caption", j);                D.slideUp(function() {                    a(this).html(C)                });                if (C != "") {                    if (D.size() > 0) {                        if (!D.is(":visible")) {                            D.html(C)                        }                        D.slideDown()                    } else {                        var B = a('
     
      ' + C + "
     
");                        B.css({                            opacity: c.captionOpacity,                            width: j.width(),                            position: "absolute",                            top: 0,                            left: 0,                            display: "none"                        });                        B.appendTo(j);                        B.slideDown()                    }                }            };            t.prototype.runner = function() {                this.applyLink();                this.applyCaption();                this.process()            };            t.prototype.begin = function() {                var A = this.$imgs.eq(this.nextImg);                j.css({                    backgroundImage: "url(" + A.attr("src") + ")",                    height: A.height()                });                this.runner();                this.transitionCount--;                this.startShow()            };            var i = Class.extend({                circleCount: null,                init: function() {                    this.circleCount = 0                },                addAll: function() {                    this.addCircles();                    this.addPrevAndNextLinks();                    a("a.circle").click(this.circleClickHandler);                    a(".prev-link").click(this.prevLinkHandler);                    a(".next-link").click(this.nextLinkHandler);                    if (c.hideSlideChooser) {                        a("a.circle").hide()                    }                    if (c.hidePrevAndNextArrows) {                        a(".prev-link, .next-link").hide()                    }                },                addCircles: function() {                    var A = this;                    y.$imgs.each(function() {                        var B = a('');                        B.css({                            right: (y.size - A.circleCount - 1) * 20 + 10                        });                        B.appendTo(j);                        A.circleCount++                    })                },                addPrevAndNextLinks: function() {                    a('').appendTo(j);                    a('').appendTo(j)                },                circleClickHandler: function(B) {                    var A = parseInt(a(this).attr("rel"), 10);                    y.goToSlide(A);                    B.preventDefault()                },                prevLinkHandler: function(B) {                    var A = y.displayImg - 1;                    if (A < 0) {                        A = y.size - 1                    }                    y.goToSlide(A);                    B.preventDefault()                },                nextLinkHandler: function(B) {                    var A = y.displayImg + 1;                    if (A >= y.size) {                        A = 0                    }                    y.goToSlide(A);                    B.preventDefault()                }            });            var l = new i();            l.addAll();            y.populateTransitions();            y.begin()        });        return this    }})(jQuery);

这已经封装成一个jQuery插件，我们只需简单地调用即可。以上就是这款jQuery百叶窗焦点图的全部代码，你也可以下载源代码来研究，还算简单的。