这是一款基于jQuery的百叶窗焦点图动画，和之前介绍的CSS3百叶窗焦点图动画不同的是，它的兼容性更好，实用性更强，因为它是基于纯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>

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 );}

JavaScript代码

(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 class="caption"><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 + '" class="circle"></a>');B.css({right: (y.size - A.circleCount - 1) * 20 + 10});B.appendTo(j);A.circleCount++})},addPrevAndNextLinks: function() {a('<a href="#" class="prev-link"></a>').appendTo(j);a('<a href="#" class="next-link"></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实现百叶窗焦点图动画效果代码分享(附源码下载)就给大家介绍到这里，希望对大家有所帮助！