jq轮播效果地址
HTML
css
JS代码--jq轮播
;(function ($, window, document, undefined) {
'use strict';
function Sliders(element, options) {
this.element = element;
this.options = {
vWidth: options.vWidth || element.width(),
current: options.current || 1,
imgArr: options.imgArr,
len: options.imgArr.length,
autoLoop: options.autoLoop,
time: options.time || 4000
};
this.init();
}
Sliders.prototype = {
constructor: Sliders,
init: function () {
this.createHtml();
this.bindEvent();
this.hackLoop();
},
createHtml: function () {
var me = this;
var imgArr = me.options.imgArr,
len = me.options.len,
content = [],
pointer = [],
current = me.options.current;
content.push("");
content.push("");
content.push("");
pointer.push("");
for (var i = 0; i < len; i++) {
content.push("
");
content.push("
");
me.element.html((content.concat(pointer)).join(''));
},
bindEvent: function () {
var me = this;
me.element.on('mouseenter', '.sliderUl', function () {
clearInterval(me.timer);
});
me.element.on('mouseleave', '.sliderUl', function () {
me.hackLoop();
});
me.element.on('click', '.pointer li', function () {
clearInterval(me.timer);
var index = parseInt($(this).data('index'));
me.goPage(index);
});
me.element.on('click', '#preBtn', function () {
clearInterval(me.timer);
var current = me.options.current, len = me.options.len;
if (current === 1) {
var vWidth = me.options.vWidth;
var temp = (-len * vWidth);
me.element.children('.sliderUl').css({
"-webkit-transform": "translateX(" + temp + "px)",
"transform": "translateX(" + temp + "px)",
"transition-duration": "none",
"transition-timing-function": "none",
"transition-property": "none"
});
me.options.current = len - 1;
} else if (current === len) {
me.options.current = len - 2;
} else {
me.options.current = 0;
}
setTimeout(function () {
me.loop();
}, 10);
});
me.element.on('click', '#nextBtn', function () {
clearInterval(me.timer);
var current = me.options.current, len = me.options.len;
me.options.current = current === len ? len : current; // 20190430 15:18更改 len ? 0 : current
me.loop();
});
},
loop: function () {
var me = this;
var current = me.options.current, vWidth = me.options.vWidth, len = me.options.len;
var temp = (-current * vWidth);
var sliderUl = me.element.children('.sliderUl');
sliderUl.css({
"-webkit-transform": "translateX(" + temp + "px)",
"transform": "translateX(" + temp + "px)",
"transition-duration": "0.4s",
"transition-timing-function": "ease-in",
"transition-property": "transform"
});
var pointerLi = me.element.children('.pointer').children("li");
pointerLi.removeClass("current");
pointerLi.eq(current === len ? 0 : current).addClass("current");
if (me.options.current === len) {
setTimeout(function () {
sliderUl.css({
"-webkit-transform": "translateX(0px)",
"transform": "translateX(0px)",
"transition-duration": "none",
"transition-timing-function": "none",
"transition-property": "none"
});
//时间必须不小于动画所需时间
}, 500);
}
me.options.current = (len !== current) ? ++current : 1;
},
hackLoop: function () {
var me = this;
if (me.options.autoLoop) {
me.timer = setInterval(function () {
me.loop();
}, me.options.time);
}
},
goPage: function (index) {
var me = this;
var vWidth = me.options.vWidth;
me.options.current = index;
me.element.children('.sliderUl').css({
"-webkit-transform": "translateX(" + (-(index - 1) * vWidth) + "px)",
"transform": "translateX(" + (-(index - 1) * vWidth) + "px)",
"transition-duration": "0.4s",
"transition-timing-function": "ease-in",
"transition-property": "transform"
});
var pointerLi = me.element.children('.pointer').children("li");
pointerLi.removeClass("current");
pointerLi.eq(index - 1).addClass("current");
}
};
$.fn.sliders = function (options) {
return new Sliders($(this), options);
}})(jQuery, window, document);
JS代码--jq分页
效果地址
;(function ($, window, document, undefined) {
'use strict';
function Paging(element, options) {
this.element = element;
this.options = {
pageNum: options.pageNum || 1, // 当前页码
totalNum: options.totalNum, // 总页码
totalList: options.totalList, // 数据总记录
callback: options.callback // 回调函数
};
this.init();
}
Paging.prototype = {
constructor: Paging,
init: function () {
this.createHtml();
this.bindEvent();
},
createHtml: function () {
var me = this;
var content = [];
var pageNum = me.options.pageNum;
var totalNum = me.options.totalNum;
var totalList = me.options.totalList;
content.push("");
// 总页数大于6必显示省略号
if (totalNum > 6) {
// 1、当前页码小于5且总页码大于6 省略号显示后面+总页码
if (pageNum < 5) {
// 1与6主要看要显示多少个按钮 目前都显示5个
for (var i = 1; i < 6; i++) {
if (pageNum !== i) {
content.push("");
} else {
content.push("");
}
}
content.push(". . .");
content.push("");
} else {
// 2、当前页码接近后面 到最后页码隔3个 省略号显示后面+总页面
if (pageNum < totalNum - 3) {
for (var i = pageNum - 2; i < pageNum + 3; i++) {
if (pageNum !== i) {
content.push("");
} else {
content.push("");
}
}
content.push(". . .");
content.push("");
} else {
// 3、页码至少在5，最多在【totalNum - 3】的中间位置 第一页+省略号显示前面
content.push("");
content.push(". . .");
for (var i = totalNum - 4; i < totalNum + 1; i++) {
if (pageNum !== i) {
content.push("");
} else {
content.push("");
}
}
}
}
} else {
// 总页数小于6
for (var i = 1; i < totalNum + 1; i++) {
if (pageNum !== i) {
content.push("");
} else {
content.push("");
}
}
}
content.push("");
content.push(" 共 " + totalNum + " 页 ");
content.push(" 共 " + totalList + " 条记录 ");
me.element.html(content.join(''));
// DOM重新生成后每次调用是否禁用button
setTimeout(function () {
me.dis();
}, 20);
},
bindEvent: function () {
var me = this;
me.element.off('click', 'button');
// 委托新生成的dom监听事件
me.element.on('click', 'button', function () {
var id = $(this).attr('id');
var num = parseInt($(this).html());
var pageNum = me.options.pageNum;
if (id === 'prePage') {
if (pageNum !== 1) {
me.options.pageNum -= 1;
}
} else if (id === 'nextPage') {
if (pageNum !== me.options.totalNum) {
me.options.pageNum += 1;
}
} else if (id === 'firstPage') {
if (pageNum !== 1) {
me.options.pageNum = 1;
}
} else if (id === 'lastPage') {
if (pageNum !== me.options.totalNum) {
me.options.pageNum = me.options.totalNum;
}
} else {
me.options.pageNum = num;
}
me.createHtml();
if (me.options.callback) {
me.options.callback(me.options.pageNum);
}
});
},
dis: function () {
var me = this;
var pageNum = me.options.pageNum;
var totalNum = me.options.totalNum;
if (pageNum === 1) {
me.element.children('#firstPage, #prePage').prop('disabled', true);
} else if (pageNum === totalNum) {
me.element.children('#lastPage, #nextPage').prop('disabled', true);
}
}
};
$.fn.paging = function (options) {
return new Paging($(this), options);
}})(jQuery, window, document);