jq.Slide.js
4.49 KB
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/**
* @author 愚人码头
*/
(function($){
$.fn.Slide=function(options){
var opts = $.extend({},$.fn.Slide.deflunt,options);
var index=1;
var targetLi = $("." + opts.claNav + " li", $(this));//目标对象
var clickNext = $("." + opts.claNav + " .next", $(this));//点击下一个按钮
var clickPrev = $("." + opts.claNav + " .prev", $(this));//点击上一个按钮
var ContentBox = $("." + opts.claCon , $(this));//滚动的对象
var ContentBoxNum=ContentBox.children().size();//滚动对象的子元素个数
var slideH=ContentBox.children().first().height();//滚动对象的子元素个数高度，相当于滚动的高度
var slideW=ContentBox.children().first().width();//滚动对象的子元素宽度，相当于滚动的宽度
var autoPlay;
var slideWH;
if(opts.effect=="scroolY"||opts.effect=="scroolTxt"){
slideWH=slideH;
}else if(opts.effect=="scroolX"||opts.effect=="scroolLoop"){
ContentBox.css("width",ContentBoxNum*slideW);
slideWH=slideW;
}else if(opts.effect=="fade"){
ContentBox.children().first().css("z-index","1");
}
return this.each(function() {
var $this=$(this);
//滚动函数
var doPlay=function(){
$.fn.Slide.effect[opts.effect](ContentBox, targetLi, index, slideWH, opts);
index++;
if (index*opts.steps >= ContentBoxNum) {
index = 0;
}
};
clickNext.click(function(event){
$.fn.Slide.effectLoop.scroolLeft(ContentBox, targetLi, index, slideWH, opts,function(){
for(var i=0;i<opts.steps;i++){
ContentBox.find("li:first",$this).appendTo(ContentBox);
}
ContentBox.css({"left":"0"});
});
event.preventDefault();
});
clickPrev.click(function(event){
for(var i=0;i<opts.steps;i++){
ContentBox.find("li:last").prependTo(ContentBox);
}
ContentBox.css({"left":-index*opts.steps*slideW});
$.fn.Slide.effectLoop.scroolRight(ContentBox, targetLi, index, slideWH, opts);
event.preventDefault();
});
//自动播放
if (opts.autoPlay) {
autoPlay = setInterval(doPlay, opts.timer);
ContentBox.hover(function(){
if(autoPlay){
clearInterval(autoPlay);
}
},function(){
if(autoPlay){
clearInterval(autoPlay);
}
autoPlay=setInterval(doPlay, opts.timer);
});
}
//目标事件
targetLi.hover(function(){
if(autoPlay){
clearInterval(autoPlay);
}
index=targetLi.index(this);
window.setTimeout(function(){$.fn.Slide.effect[opts.effect](ContentBox, targetLi, index, slideWH, opts);},200);
},function(){
if(autoPlay){
clearInterval(autoPlay);
}
autoPlay = setInterval(doPlay, opts.timer);
});
});
};
$.fn.Slide.deflunt={
effect : "scroolY",
autoPlay:true,
speed : "normal",
timer : 1000,
defIndex : 0,
claNav:"JQ-slide-nav",
claCon:"JQ-slide-content",
steps:1
};
$.fn.Slide.effectLoop={
scroolLeft:function(contentObj,navObj,i,slideW,opts,callback){
contentObj.animate({"left":-i*opts.steps*slideW},opts.speed,callback);
if (navObj) {
navObj.eq(i).addClass("on").siblings().removeClass("on");
}
},
scroolRight:function(contentObj,navObj,i,slideW,opts,callback){
contentObj.stop().animate({"left":0},opts.speed,callback);
}
}
$.fn.Slide.effect={
fade:function(contentObj,navObj,i,slideW,opts){
contentObj.children().eq(i).stop().animate({opacity:1},opts.speed).css({"z-index": "1"}).siblings().animate({opacity: 0},opts.speed).css({"z-index":"0"});
navObj.eq(i).addClass("on").siblings().removeClass("on");
},
scroolTxt:function(contentObj,undefined,i,slideH,opts){
//alert(i*opts.steps*slideH);
contentObj.animate({"margin-top":-opts.steps*slideH},opts.speed,function(){
for( var j=0;j<opts.steps;j++){
contentObj.find("li:first").appendTo(contentObj);
}
contentObj.css({"margin-top":"0"});
});
},
scroolX:function(contentObj,navObj,i,slideW,opts,callback){
contentObj.stop().animate({"left":-i*opts.steps*slideW},opts.speed,callback);
if (navObj) {
navObj.eq(i).addClass("on").siblings().removeClass("on");
}
},
scroolY:function(contentObj,navObj,i,slideH,opts){
contentObj.stop().animate({"top":-i*opts.steps*slideH},opts.speed);
if (navObj) {
navObj.eq(i).addClass("on").siblings().removeClass("on");
}
}
};
})(jQuery);