这是一款基于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_superb/) : (/.*/);
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) {
