// 幻灯片插件
// by ldp
;
(function () {
// 方法集合对象
var slider = {
// 初始化函数
init: function (options) {
return this.each(function () {
var $this = $(this);
var settings = $this.data('fadeSlider');
var defaults;
if (typeof settings === 'undefined') {
// 未定义配置，则启用默认设置
defaults = {
controlBtn: '.slider_control', // 控制按钮容器
controlType: 'click', // 控制按钮触发事件
autoAnim: true, // 自动播放
intervalTime: 4000, // 播放间隔
fadeInSpeed: 'slow', // 淡入时间
fadeOutSpeed: 'normal', // 淡出时间
LRBtns: false, // 是否启用左右按钮控制
callback: null // 回调函数
};
settings = $.extend({}, defaults, options);
$this.data('fadeSlider', settings);
} else {
// 否则，覆盖并继承默认参数
settings = $.extend({}, defaults, options);
}
var $slder_con = $this.find('li');
var $slder_btn = $(settings.controlBtn).find('li');
var ctrlBtn = $(settings.controlBtn);
function checkCtrlBtn() {
if (!ctrlBtn.length) {
$this.after('<ul class="slider_control"></ul>');
ctrlBtn = $('.slider_control');
checkCtrlBtn();
} else {
if (!$slder_btn.length) {
ctrlBtn.append('<li class="on">1</li>');
}
// 检查图像个数是否和按钮相等
if ($slder_con.length > $slder_btn.length) {
for (var i = 0, len = ($slder_con.length - $slder_btn.length); i < len; i++) {
$slder_btn.parent().append('<li>' + ($slder_btn.length + i) + '</li>');
$slder_btn = ctrlBtn.find('li');
}
} else if ($slder_con.length < $slder_btn.length) {
for (var j = 0, len2 = ($slder_btn.length - $slder_con.length); j < len2; j++) {
$slder_btn.last().remove();
$slder_btn = ctrlBtn.find('li');
}
} else {
return;
}
}
}
checkCtrlBtn();
// 构造器
var SliderConstructor = function (container, controller) {
this.controller = controller;
this.container = container;
this.timeId = null;
this.num = 0;
this.slider_len = controller.length;
this.initEvents();
};
// 公用方法
SliderConstructor.prototype = {
initEvents: function () {
var _this = this;
this.container.hide();
this.controller.removeClass('on');
if (settings.LRBtns) {
this.createLRBtn();
}
var leftBtn = $('#leftBtn');
var rightBtn = $('#rightBtn');
$this.on('mouseover',function () {
//停止
_this.stop();
}).on('mouseout',function () {
_this.autoAnim();
}).mouseleave();
this.controller.on(settings.controlType,function () {
_this.stop();
var num = _this.controller.index(this); //获取当前控制按钮序号
//其它图片淡出后，该序号相同的图片淡入
if (!_this.container.is(':animated') && !$(this).hasClass('on')) {
_this.fadeAnim(num);
}
if (settings.autoAnim) {
_this.autoAnim();
}
}).eq(0).trigger(settings.controlType);
if (settings.callback !== null) {
settings.callback.apply(window, this.num);
}
},
/**
* 淡入淡出动画
* @param {Number} i
*/
fadeAnim: function (i) {
var _this = this;
_this.num = i; // 记录到num里面，相当于全局变量
// 按钮状态变更
this.controller.eq(_this.num).addClass("on").siblings().removeClass("on");
// 幻灯片淡入淡出
this.container.removeClass('currentImg').fadeOut(settings.fadeOutSpeed).eq(_this.num).addClass('currentImg').fadeIn(settings.fadeInSpeed);
},
/**
* 自动播放
*/
autoAnim: function () {
var _this = this; // 避免setInterval中的this指向window
_this.timeId = setInterval(function () {
// 循环
_this.num = (_this.num === _this.slider_len - 1) ? 0 : (++_this.num);
_this.fadeAnim(_this.num);
}, settings.intervalTime);
},
/**
* 停止播放
*/
stop: function () {
var _this = this;
clearInterval(_this.timeId);
},
createLRBtn: function () {
var _this = this;
var LRBtnStr = '<a id="leftBtn" class="slide_ctrlBtn" href="javascript:"><</a><a id="rightBtn" class="slide_ctrlBtn" href="javascript:">></a>';
this.container.parent().parent().append($(LRBtnStr));
var left = $('#leftBtn'),
right = $('#rightBtn');
left.on('click', function () {
_this.stop();
if (!_this.container.is(':animated')) {
_this.num = (_this.num === 0) ? _this.slider_len - 1 : (--_this.num);
_this.fadeAnim(_this.num);
}
_this.autoAnim();
});
right.on('click', function () {
_this.stop();
if (!_this.container.is(':animated')) {
_this.num = (_this.num === _this.slider_len - 1) ? 0 : (++_this.num);
_this.fadeAnim(_this.num);
}
_this.autoAnim();
});
var width = left.width();
this.container.parent().parent().on({
'mouseenter': function (e) {
left.stop(false, true).animate({
'left': 0
}, 400);
right.stop(false, true).animate({
'right': 0
}, 400);
},
'mouseleave': function (e) {
left.stop(false, true).animate({
'left': -width + 'px'
}, 400);
right.stop(false, true).animate({
'right': -width + 'px'
}, 400);
}
});
}
};
var fSlider = new SliderConstructor($slder_con, $slder_btn);
});
},
/**
* 摧毁对象
* @param options
* @return {*|jQuery}
*/
destroy: function (options) {
return $(this).each(function () {
var $this = $(this);
$this.removeData('fadeSlider');
});
}
};
$.fn.fadeSlider = function () {
// 第一个参数为slider对象的属性方法
var method = arguments[0];
var args;
if (slider[method]) {
// 存在属性，取出第一个后面的其他参数
method = slider[method];
args = Array.prototype.slice.call(arguments, 1);
} else if (typeof method === 'object' || !method) {
// 如果未定义method，则默认为init
method = slider.init;
} else {
// 否则抛出错误
$.error('Method ' + method + 'does not exist on jQuery.pluginName');
return this;
}
// 调用第一个参数函数，并把后面的参数传入
return method.apply(this, args);
};
})(jQuery);
// demo
$(function () {
// 网站首页
$('ul.slider_container').fadeSlider('init', {
controlBtn: 'ul.b_slider_control',
controlType: 'click',
intervalTime: 6000,
fadeInSpeed: 650,
fadeOutSpeed: 1000
});
$('ul.inBan_container').fadeSlider('init', {
controlBtn: 'ol.inBan_ctrls',
controlType: 'click',
intervalTime: 5000,
fadeInSpeed: 450,
fadeOutSpeed: 600,
LRBtns: true
});
// 新闻首页
$('.newsSlider_wrap').fadeSlider('init', {
controlBtn: '.mewsS-control',
controlType: 'mouseover'
});
});
