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

 

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

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

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

HTML代码:

<div id="slider">
<img src="data:images/1.jpg" alt="网页素材大全1" title="网页素材大全" />
<img src="data:images/2.jpg" alt="网页素材大全2" title="网页素材大全" />
<img src="data: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百叶窗焦点图的全部代码,你也可以下载源代码来研究,还算简单的。源代码下载>>

jQuery百叶窗图片滑块的更多相关文章

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

    原文:超酷的jQuery百叶窗图片滑块实现教程 今天我们要来分享一款基于jQuery的百叶窗焦点图插件,也可以说是图片滑块插件.这种jQuery焦点图插件的应用非常广泛,在早些年前,我们需要用flas ...

  2. 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单

    新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...

  3. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  4. 使用CSS3实现3D图片滑块效果

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  5. 使用 CSS3 实现 3D 图片滑块效果

    Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...

  6. 八款强大的jQuery图片滑块动画插件

    jQuery是一款相当轻巧的JavaScript框架,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是 一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多 ...

  7. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  8. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

  9. 不容错过的七个jQuery图片滑块插件

    1.jQuery多图并列焦点图插件 今天我们要来分享一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示.和其他jQuery焦点图一样,这 ...

随机推荐

  1. WP8加入自己定义铃声

    1.下载千千静听绿色版,下载地址:http://pan.baidu.com/s/1ntuSNOH 2.将目标铃声加入到千千静听,选中铃声,右键选文件属性. 3.改动文件属性,将流派改为"Ri ...

  2. MapReduce架构和算法(2)

    一个.combiner计划 每map它可能会产生大量的输出,combiner的作用是map输出端先做合并.reducer的数据量. combiner最基本是实现本地key的归并,combiner具有类 ...

  3. php:的图形计算器的面向对象的版本武器2

    通过自带部分result.class.php分流,由于这三个类继承shape这个类,让我们来看看,面向对象的继承. shape.class.shape档 <?php abstract class ...

  4. shell 监控局域网的主机是否up(转)

    #!/bin/bash for ((i=30;i<60;i++)) ;do ping -c 3 172.31.0.$i>/dev/null #ping -c 172.31.0.30 ~17 ...

  5. 快速入门:十分钟学会Python(转)

    初试牛刀 假设你希望学习Python这门语言,却苦于找不到一个简短而全面的入门教程.那么本教程将花费十分钟的时间带你走入Python的大门.本文的内容介于教程(Toturial)和速查手册(Cheat ...

  6. activiti入门2流程引擎API和服务基础设施

    RepositoryService : 管理和控制公布包和流程定义(包括了一个流程每一个环节的结构和行为)的操作 除此之外,服务能够 查询引擎中的公布包和流程定义. 暂停或激活公布包.相应所有和特定流 ...

  7. 用Maven整合SpringMVC+Spring+Hibernate 框架,实现简单的插入数据库数据功能

    一.搭建開始前的准备 1.我用的MyEclipse2014版,大家也能够用IDEA. 2.下载Tomcat(免安装解压包).MySQL(zip包下载地址 免安装解压包,优点就是双击启动,最后我会把ba ...

  8. PB控制性能TreeView

    TreeView [其它] ■TreeView控件能够以树型方式来组织项目.不仅显示直观.界面友好.并且项目的管理和操作更为方便,是当前比較流行的一个控件. 该控件的特点是在较小的空间能够分层次显示大 ...

  9. css3布局相关(持续更新)

    1三栏布局,两边定宽,中间自适应 2让文字位于div元素的正中央 3不管浏览器窗口如何变化,让一张图片始终显示在浏览器正中央.

  10. 用css2属性clip实现网页进度条

    前言 看了网上一些关于网页进度条样式的资料,有很多方式实现,针对其展现形式,有用图片的,有用css2属性clip,有用flash的,本人就学会了一种,下面就简单来介绍一下. css2的属性clip 如 ...