超酷的jQuery百叶窗图片滑块实现教程

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

你也可以在这里查看在线演示

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

HTML代码：

<div id="slider">
<img src="images/1.jpg" alt="网页素材大全1" title="网页素材大全" />
<img src="images/2.jpg" alt="网页素材大全2" title="网页素材大全" />
<img src="images/3.jpg" alt="网页素材大全3" title="网页素材大全" />
</div>

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("<div></div>");
                        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('<div><span>' + C + "</span></div>");
                        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('<a href="#" rel="' + A.circleCount + '"></a>');
                        B.css({
                            right: (y.size - A.circleCount - 1) * 20 + 10
                        });
                        B.appendTo(j);
                        A.circleCount++
                    })
                },
                addPrevAndNextLinks: function() {
                    a('<a href="#"></a>').appendTo(j);
                    a('<a href="#"></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百叶窗焦点图的全部代码，你也可以下载源代码来研究，还算简单的。源代码下载>>