目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动;none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失。
Demo Address:http://demo.Vevb.com/js/2012/sinaapp/
代码如下:
/**
* 巨无霸轮播
*/
$.fn.loopSlider = function(option) {
var setting = {
// 默认显示的顺序
initIndex: 1,
// 加在title节点上的样式
className: "current",
// 轮播方向,默认为x轴方向轮播
direct: "x",
// 上一张按钮
prevBtn: "",
// 下一张按钮
nextBtn: "",
// 上下翻页按钮禁用的样式
btnDisable: "disable",
// 按钮按下的样式
btnTouchClass: "",
// 自动轮播
auto: false,
// 自动轮播时间间隔
timeFlag: 4000,
// 轮播效果时间
scrollTime: 350,
// 轮播效果
effect: "scroll",
// 在只有一个轮播元素的时候是否隐藏滑动按钮
hideBtn: true,
// 是否循环轮播
cycle: true,
// 轮播的内容区的容器路径
contentContainer: "#imgScroll",
// 轮播的内容区的节点
contentChildTag: "li",
// 标题轮播区域的容器路径
titleContainer: "#titleScroll",
// 标题轮播区域的节点
titleChildTag: "li",
// 轮播的内容区的数组
cont: [],
// 轮播的标题区的数组
tabs: [],
// 当前轮播序号
current: 0,
// 定时器
ptr: "",
// 轮播回调函数,每次轮播调用,参数为当前轮播的序号
callback: function() {
return true;
}
}
if (option) {
$.extend(setting, option);
}
// 初始化当前调用类型的函数
setting.currentMethod = function() {
return true;
}
var boss = $(this);
// 如果不是第一个元素先轮播
if (setting.initIndex != 1) {
setting.current = setting.initIndex - 1;
}
// 获取轮播的节点列表
var childList = boss.find(setting.contentContainer + " " + setting.contentChildTag);
// 获取轮播标题节点列表
var titleList = boss.find(setting.titleContainer + " " + setting.titleChildTag);
// 保存内容区每一个轮播节点
setting.cont = childList;
// 保存标题的轮播节点
setting.tabs = titleList;
// 如果没有需要轮播的内容,直接返回
if (setting.cont.length == 0) {
return;
}
// 给内容区和标题区设置index属性
childList.each(function(index) {
$(this).attr("index", index);
titleList.eq(index).attr("index", index);
});
// 上下箭头
var nextBtn = boss.find(setting.nextBtn);
var prevBtn = boss.find(setting.prevBtn);
// 长度
var counts = childList.length;
// 轮播容器的父节点
var childParent = childList.parent();
var titleParent = titleList.parent();
if (childList.length < setting.initIndex) {
setting.current = 0;
}
// 初始化
doInit();