这是一款基于jQuery的百叶窗焦点图动画，和之前介绍的CSS3百叶窗焦点图动画不同的是，它的兼容性更好，实用性更强，因为它是基于纯jQuery的，基本上所有浏览器都能够支持。焦点图的图片切换动画是百叶窗的动画方式，但也有几种不同的百叶窗动画，因此也不会觉得单调。
在线演示 源码下载
HTML代码
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-600 ); } .next-link { left: 40px; background-image: url(next.png-600 ); } .circle { display: block; width: 16px; height: 16px; background: url(circle-empty.png-600 ) no-repeat left top; position: absolute; bottom: 10px; z-index: 300; } .circle-current { background-image: url(circle-full.png-600 ); }
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 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 = y.size) { A = 0 } y.goToSlide(A); B.preventDefault() } }); var l = new i(); l.addAll(); y.populateTransitions(); y.begin() }); return this } })(jQuery);
当然不要忘记在网页中引用jQuery的相关库文件。
关于jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)就给大家介绍到这里，希望对大家有所帮助！
以上就是jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)的详细内容，更多请关注本站其它相关文章！
