欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于jquery的图片轮播 tab切换组件

程序员文章站 2022-06-14 12:03:49
目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动;none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止...

目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动;none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失。

代码如下:


/**
* 巨无霸轮播
*/
$.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();
if (childlist.length <= 1) {
return;
}
/**
* 处理无效果的切换
*/
var doscrollnone = {
process: function(i) {
childlist.eq(i).css("display", "block").siblings().css("display", "none");
titlelist.eq(i).addclass(setting.classname).siblings().removeclass(setting.classname);
// 记录当前显示的节点
setting.current = i;
// 调用回调函数
setting.callback(setting.current);
},
init: function() {
setting.currentmethod = doscrollnone;
bindevent();
// 自动轮播
if (setting.auto) {
processauto();
}
// 初始化的时候也调用回调函数
setting.callback(setting.current);
}
};
var doscrollxy = {
c_width: 0,
c_height: 0,
init: function() {
// 轮播元素的宽度
this.c_width = childlist.width();
// 轮播元素的高度
this.c_height = childlist.height();
// x轴方向轮播
if (setting.direct == "x") {
childparent.width(this.c_width * (childlist.length > 1 ? counts + 1 : counts));
childparent.css("left", -this.c_width * (setting.current));
} else {
childparent.height(this.c_height * (childlist.length > 1 ? counts + 1 : counts));
childparent.css("top", -this.c_height * (setting.current));
}
titlelist.eq(setting.current).addclass(setting.classname).siblings().removeclass(setting.classname);
setting.currentmethod = doscrollxy;
// 绑定事件
bindevent();
// 初始化的时候也调用回调函数
setting.callback(setting.current);
// 自动轮播
if (setting.auto) {
processauto();
}
},
process: function(i, needfast) {
setting.current = i;
//alert(i)
if (setting.direct == "x") {
// 执行效果动画
childparent.animate({
left: "-" + (this.c_width * i)
},
(needfast ? 50 : setting.scrolltime),
function() {
if (setting.current == counts) {
doscrollxy.processmove("left", $(this));
}
if (setting.auto) {
processauto();
}
});
} else {
childparent.animate({
top: "-" + (this.c_height * i)
},
(needfast ? 50 : setting.scrolltime),
function() {
if (setting.current == counts) {
doscrollxy.processmove("top", $(this));
}
if (setting.auto) {
processauto();
}
});
}
if (i == counts) {
i = 0;
}
// 调用回调函数
setting.callback(setting.current);
titlelist.eq(i).addclass(setting.classname).siblings().removeclass(setting.classname);
},
processmove: function(direct, node) {
var childs = node.children();
for (var i = 1; i < childs.length - 1; i++) {
var removenode = childs.eq(i).remove();
node.append(removenode);
}
var first = childs.eq(0).remove();
node.append(first);
node.css(direct, "0");
}
};
switch (setting.effect) {
case "none":
doscrollnone.init();
break;
case "scroll":
doscrollxy.init();
break;
}
// 一些初始化操作
function doinit() {
childparent.css("position", "relative");
if (!setting.cycle) {
prevbtn.removeclass(setting.btndisable);
nextbtn.removeclass(setting.btndisable);
if (setting.current == 0) {
prevbtn.addclass(setting.btndisable);
}
if (setting.current == counts - 1) {
nextbtn.addclass(setting.btndisable);
}
}
// 只有一个元素,并且需要隐藏按钮
if (childlist.length <= 1 && setting.hidebtn) {
prevbtn.hide();
nextbtn.hide();
}
// 克隆第一个元素到最后
if (childlist.length > 1) {
var clonenode = childlist.eq(0).clone();
clonenode.attr("index", counts);
clonenode.appendto(childparent);
}
}
/**
* 绑定轮播事件
*/
function bindevent() {
nextbtn && nextbtn.bind("click",
function(event) {
// 如果按钮已经被禁用
if ($(this).hasclass(setting.btndisable)) {
return;
}
var cur = setting.current;
if (cur >= 0) {
prevbtn.removeclass(setting.btndisable);
}
if (cur == counts - 2 && !setting.cycle) {
$(this).addclass(setting.btndisable);
}
if (cur == counts) {
setting.current = 1;
} else if (cur == counts - 1) {
// 轮播到最后一个
setting.current = counts;
} else {
setting.current = cur + 1;
}
if (setting.ptr) {
clearinterval(setting.ptr);
setting.ptr = null;
}
$(this).addclass(setting.btntouchclass);
setting.currentmethod.process(setting.current);
});
prevbtn && prevbtn.bind("click",
function() {
if ($(this).hasclass(setting.btndisable)) {
return;
}
var cur = setting.current;
if (cur <= counts - 1) {
nextbtn.removeclass(setting.btndisable);
}
if (cur == 1 && !setting.cycle) {
$(this).addclass(setting.btndisable);
}
setting.current = cur == 0 ? counts - 1 : cur - 1;
if (setting.ptr) {
clearinterval(setting.ptr);
setting.ptr = null;
}
$(this).addclass(setting.btntouchclass);
var fast = false;
if (cur == 0) {
fast = true;
}
setting.currentmethod.process(setting.current, fast);
});
titleparent && titleparent.bind("click",
function(e) {
var element = $(e.target);
// 得到轮播节点
while (element[0].tagname != titlelist[0].tagname) {
element = element.parent();
}
if (setting.ptr) {
clearinterval(setting.ptr);
setting.ptr = null;
}
var index = parseint(element.attr("index"), 10);
if (index != 0) {
prevbtn.removeclass(setting.btndisable);
} else if (!setting.cycle) {
prevbtn.addclass(setting.btndisable);
}
if (index != counts - 1) {
nextbtn.removeclass(setting.btndisable);
} else if (!setting.cycle) {
nextbtn.addclass(setting.btndisable);
}
setting.currentmethod.process(index);
});
childparent[0].ontouchstart = handletouchstart;
// 触摸屏幕事件
function handletouchstart(event) {
var element = $(event.target);
// 得到标题节点
while (element[0].tagname != childlist[0].tagname) {
element = element.parent();
}
if (event.targettouches.length == 0) {
return;
}
var touch = event.targettouches[0];
var startx = touch.pagex;
var starty = touch.pagey;
var movedirect = "";
var currentposition = setting.direct == "x" ? childparent.css("left") : childparent.css("top");
if (setting.ptr) {
clearinterval(setting.ptr);
setting.ptr = null;
}
// 手指滑动事件
childparent[0].ontouchmove = handletouchmove;
function handletouchmove(moveevent) {
var movetouch = moveevent.targettouches[0];
if (setting.direct == 'x') {
var movex = movetouch.pagex;
var movey = movetouch.pagey;
var x = movex - startx;
var y = movey - starty;
// 这里的目的是在左右滑动图片的时候,阻止的默认事件,但是如果是上下滑动的情况,一般是滑动滚动条,不能直接就阻止浏览器默认事件,不然会导致用户在上下滑动的时候页面停止的情况,这里设置的是在x轴方向要比在y轴方向滑动至少多10的像素,可以有效的避免上述情况发生
if (math.abs(x) - math.abs(y) > 10) {
// 阻止默认的事件
moveevent.preventdefault();
childparent.css("left", parsefloat(currentposition) + x);
movedirect = x > 0 ? "sub": "add";
} else {
return;
}
} else {
// y轴方向滚动
moveevent.preventdefault();
var movey = touch.pagey;
var y = movey - starty;
childparent.css("top", parsefloat(currentposition) + y);
movedirect = y > 0 ? "sub": "add";
}
childparent[0].ontouchend = handletouchend;
}
//手指离开屏幕
function handletouchend() {
//根据手指移动的方向,判断下一个要显示的节点序号
var fast = false;
if (movedirect == "add") {
if (setting.current == counts) {
setting.current = 1;
} else {
setting.current = setting.current + 1;
}
} else {
if (setting.current == 0) {
setting.current = counts - 1;
fast = true;
} else {
setting.current = setting.current - 1;
}
}
// 调用对应的处理函数
setting.currentmethod.process(setting.current, fast);
childparent[0].ontouchend = null;
childparent[0].ontouchmove = null;
}
}
}
/**
* 自动轮播
*/
function processauto() {
if (setting.ptr) {
clearinterval(setting.ptr);
setting.ptr = null;
}
// 设置轮播定时器
setting.ptr = setinterval(function() {
if (setting.current == counts) {
setting.current = 1;
} else if (setting.current == counts - 1) {
// 轮播到最后一个
setting.current = counts;
} else {
setting.current = setting.current + 1;
}
var index = setting.current;
if (index != 0) {
prevbtn.removeclass(setting.btndisable);
} else if (!setting.cycle) {
prevbtn.addclass(setting.btndisable);
}
if (index != counts - 1) {
nextbtn.removeclass(setting.btndisable);
} else if (!setting.cycle) {
nextbtn.addclass(setting.btndisable);
}
setting.currentmethod.process(setting.current);
},
setting.timeflag);
}
// 返回一个函数,可以在调用返回函数,指定下一次需要轮播的图片的序号,一般用在点击一个小图,然后需要查看大图的情况下,那么就只需要给大图绑定一次轮播事件,再点击某一张小图的时候只需要调用该函数,把对应的序号传入即可
return function(index) {
if (index < 0) {
index = 0;
} else if (index >= counts) {
index = counts - 1;
}
setting.currentmethod.process(index);
}
}