思路:
1. 通过jq改变元素的css,来实现背景的切换
功能:
1. 背景切换
相关知识点
1. $.fn是指jQuery的命名空间,加上fn的方法及属性,会对jQuery实例有效。
2. extend(dest,src1,src2,src3...);
2.1 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest.如果说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。
2.2 上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去
即:
jQuery.fn.extend(object); 给jQuery对象添加方法。
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
代码
(function($) {
$.fn.bgSlide = function(options){
// 默认参数
var defaults = {
bgs: [],//储存背景
model: 'default', //可选项 custom
max: 13,//切换的个数
bg: 0,//当前的位置
times: 5000,//切换时间
speed: 'fast', // 可换为 mormal , slow
opacity: 0.4,//透明度
abs: this, //默认参数请勿修改,除非你已知他的用处
arr: [],//请勿修改,缓存区
url: ''
};
// 获得参数
var ops = $.extend(defaults, options);
if (ops.model == 'custom') {
ops.max = ops.bgs.length
}
// 插件的方法
var method = {
// 获得随机切换的背景的索引
rand: function () {
ops.bg = parseInt(Math.random() * ops.max);
return ops.bg;
},
// 切换时间
time: function () {
setInterval(function () {
method.isChangeBg();
}, ops.times)
},
// 判断当前图片是否已经切换过
contains: function (arr, obj) {
var i = arr.length;
while (i--) {
if (arr[i] === obj) {
return true;
}
}
return false;
},
// 切换背景中
isChangeBg: function () {
//获得新的索引
method.rand();
if (ops.model == 'default') {
//判断是否完成一个周期
if (ops.arr.length == ops.max) {
ops.arr = [];
}
// 判断图片是否切换过
if (method.contains(ops.arr, ops.bg)) {
method.isChangeBg()
} else {
// 将未切换的索引添加到缓存区
ops.arr.push(ops.bg);
// 改变背景
method.changeBg();
}
} else if (ops.model == 'custom') {
//判断是否完成一个周期
if (ops.arr.length == ops.max) {
ops.arr = [];
}
// 判断图片是否切换过
if (method.contains(ops.arr, ops.bg)) {
method.isChangeBg()
} else {
// 将未切换的索引添加到缓存区
ops.arr.push(ops.bg);
// 改变背景
method.changeBg();
}
}
//console.log(this)
},
// 改变背景
changeBg: function () {
switch (ops.model) {
// 读取默认图片路径
case 'default':
ops.url = 'url("./staic/images/index/bg' + ops.bg + '.jpg")';
break;
// 读取自定义图片路径
case 'custom':
ops.url = 'url("' + ops.bgs[ops.bg] + '")';
break;
}
// 修改css
$(ops.abs).fadeTo(ops.speed, ops.opacity, function () {
$(ops.abs).css({
'background-image': ops.url,
'background-size': '100%',
'background-position': 'fixed',
'background-repeat': 'no-repeat',
'-webkit-transition': 'background-image 0.5s',
'-moz-transition': 'background-image 0.5s',
'-ms-transition': 'background-image 0.5s',
'-o-transition': 'background-image 0.5s',
'transition': 'background-image 0.5s'
}).delay(ops.speed).fadeTo(ops.speed, 1);
});
}
};
method.isChangeBg();
method.time();
}
})(jQuery);