文章目录
  1. 1. 淡入轮播插件
    1. 1.1. 模板图如下

淡入轮播插件

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
/*
***
auther:LGF;
date:2017-06-15;
blog:lgf196.top;
plug-in:fadebanner;
direction:只需引用到项目中即可,用法:$('xxx').fadebanner({属性:值});
attention:liimgeles,bigul,focuseles,outerdiv,leftbtn,rightbtn这几个属性必须要写不能省略
***
*/
if(window.jQuery===undefined){
throw new Error("此插件依赖于jQuery,请引入jQuery库");
}
;(function($){
$.fn.fadebanner=function(opt){
var defaults={
animatetime:400,
playtime:4000, //表示自动播放动画的时间间隔
liimgeles:'', //全部img的li
focuseles:'', //全部的小焦点
createli:'', //创建小焦点的标签
bigfocusul:'', //包含所有小焦点的父盒子
focusclass:'', //小焦点的class
outerdiv:'', //包含整个banner区的大盒子
bind:'click', //事件类型
leftbtn:'', //左按钮
rightbtn:'' //右按钮
};
var option,index=0,moveindex=0,timer=null; //集体定义变量
option=$.extend(defaults,opt);
this.each(function(){
if($(option.bigfocusul).children().length===0){ //如果有小焦点我就不创建
for (var i = 0; i <$(option.liimgeles).children().length; i++) {
var li = $(option.createli);
$(option.bigfocusul).append(li);
}
$(option.bigfocusul).children().first().addClass(option.focusclass);
}
$(option.focuseles).bind(option.bind,function(){
index=$(this).index();
moveindex=index;
move();
})
$(option.rightbtn).click(function(){
if(moveindex===$(option.liimgeles).length-1){
moveindex=0;
}
else{
moveindex++;
}
move();
});
//左箭头
$(option.leftbtn).click(function(){
if(moveindex===0){
moveindex=$(option.liimgeles).length-1;
}
else{
moveindex--;
}
move();
});
timer=setInterval(function(){$(option.rightbtn).click()},option.playtime);
$(option.outerdiv).hover(function() {
clearInterval(timer);
}, function() {
timer=setInterval(function(){$(option.rightbtn).click()},option.playtime);
});
function move(){
$(option.focuseles).eq(moveindex).addClass(option.focusclass).siblings().removeClass(option.focusclass);
$(option.liimgeles).eq(moveindex).stop(true,true).fadeIn(option.animatetime).siblings().stop(true,true).fadeOut(option.animatetime);
}
});
return this;
};
})(jQuery);

模板图如下

提示:只需将代码引入项目中即可,代码没有压缩,可以自行压缩

文章目录
  1. 1. 淡入轮播插件
    1. 1.1. 模板图如下