-
Notifications
You must be signed in to change notification settings - Fork 1
/
jquery.hislide.js
78 lines (71 loc) · 2.8 KB
/
jquery.hislide.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
(function($) {
// 本函数每次调用只负责一个轮播图的功能
// 也就是说只会产生一个轮播图,这个函数的作用域只能分配给一个轮播图
// 要求在调用本函数的时候务必把当前轮播图的根标签传递过来
// 这里的形参 ele 就是某个轮播的根标签
var slide = function(ele,options) {
var $ele = $(ele);
// 默认设置选项
var setting = {
// 控制轮播的动画时间
speed: 1000,
// 控制 interval 的时间 (轮播速度)
interval: 2000,
};
// 对象合并
$.extend(true, setting, options);
// 规定好每张图片处于的位置和状态
var states = [
//{ $zIndex: 1, width: 120, height: 150, top: 69, left: 134, $opacity: 0.2 },
{ $zIndex: 1, width: 100, height: 100, top: 59, left: 0, $opacity: 0.4 },
{ $zIndex: 2, width: 100, height: 100, top: 35, left: 65, $opacity: 0.7 },
{ $zIndex: 3, width: 100, height: 100, top: 0, left: 128, $opacity: 1 },
{ $zIndex: 2, width: 100, height: 100, top: 35, left: 175, $opacity: 0.7 },
{ $zIndex: 1, width: 100, height: 100, top: 59, left: 235, $opacity: 0.4 },
//{ $zIndex: 1, width: 120, height: 150, top: 69, left: 500, $opacity: 0.2 }
];
var $lis = $ele.find('li');
var timer = null;
// 事件
$ele.find('.hi-next').on('click', function() {
next();
});
$ele.find('.hi-prev').on('click', function() {
states.push(states.shift());
move();
});
$ele.on('mouseenter', function() {
clearInterval(timer);
timer = null;
}).on('mouseleave', function() {
autoPlay();
});
move();
autoPlay();
// 让每个 li 对应上面 states 的每个状态
// 让 li 从正中间展开
function move() {
$lis.each(function(index, element) {
var state = states[index];
$(element).css('zIndex', state.$zIndex).finish().animate(state, setting.speed).find('img').css('opacity', state.$opacity);
});
}
// 切换到下一张
function next() {
// 原理:把数组最后一个元素移到第一个
states.unshift(states.pop());
move();
}
function autoPlay() {
timer = setInterval(next, setting.interval);
}
}
// 找到要轮播的轮播图的根标签,调用 slide()
$.fn.hiSlide = function(options) {
$(this).each(function(index, ele) {
slide(ele,options);
});
// 返回值,以便支持链式调用
return this;
}
})(jQuery);