//该组件目前仅适用于一次移动一张图片的情况
(function ($) {
$.fn.extend({
"scroll": function (options) {
options = $.extend({
prevId: 'prevBtn', //左按钮的Id
nextId: 'nextBtn', //右按钮的Id
moveImgCount: '1', //click一次滚动的图片个数
perImgCount: '1', //每个版面显示的图片个数
speed: '800', //滚动一次的时间
prevBtnClass: '', //左按钮样式
nextBtnClass: '', //右按钮样式
highlightLClass: 'img_onbtnL', //左按钮的高亮效果类名
highlightRClass: 'img_onbtnR', //右按钮的高亮效果类名
highlightTag: 'scroll_tag span',
highlightTagClass: 'on',
isAutoPlay: false,
autoPlayTime: 1000
}, options);
var cur = 1; //版面计数
var moveImgCount = options.moveImgCount;
var imglen = parseInt($(this).css("width")) + parseInt($(this).css("margin-right")) + parseInt($(this).css("margin-left")); //一张图片的宽度
var imgWidth = moveImgCount * imglen; //一次滚动多长距离
var speed = options.speed;
var prevId = $("#" + options.prevId);
var nextId = $("#" + options.nextId);
var isAutoPlay = options.isAutoPlay;
var autoPlayTime = options.autoPlayTime;
var imgs = $(this); //取得图片集合
var direction = 1; //1为右，0为左
var scrollPrevId = -1;
var scrollNextId = -1;
if (imgs.length <= options.perImgCount) {
return;
}
//var totalCur = Math.ceil(imgs.length / moveImgCount);
var totalCur = imgs.length - options.perImgCount + 1;
if (isAutoPlay) {
imgs.touchstart(function () {
if (scrollPrevId != -1) {
clearInterval(scrollPrevId);
scrollPrevId = -1;
}
if (scrollNextId != -1) {
clearInterval(scrollNextId);
scrollNextId = -1;
}
});
imgs.touchend(function () {
bind();
});
}
bind(); //执行函数 function scrollPrev() {
direction = 0;
if (cur == 2) { //向前滚到倒二个版面时
if (imgs.length % moveImgCount == 0) { //图片数刚好
imgs.animate({ left: "+=" + imgWidth + "px" }, speed);
} else { //图片数不够
imgs.animate({ left: "+=" + imglen * (imgs.length % moveImgCount) + "px" }, speed);
}
} else {
imgs.animate({ left: "+=" + imgWidth + "px" }, speed); //图片向前滚动
}
cur--; //版面递减
bind();
}
function scrollNext() {
direction = 1;
if (cur == totalCur - 1) { //向后滚到倒二个版面时
if (imgs.length % moveImgCount == 0) { //图片数刚好
imgs.animate({ left: "-=" + imgWidth + "px" }, speed);
} else { //图片数不够
imgs.animate({ left: "-=" + imglen * (imgs.length % moveImgCount) + "px" }, speed);
}
} else {
imgs.animate({ left: "-=" + imgWidth + "px" }, speed); //图片向后滚动
}
cur++; //版面递增
bind();
}
function highlightL() { //左按钮高亮效果
prevId.removeClass(options.prevBtnClass).addClass(options.highlightLClass);
}
function noHighlightL() { //移除左按钮高亮效果
prevId.removeClass(options.highlightLClass).addClass(options.prevBtnClass);
}
function highlightR() { //右按钮高亮效果
nextId.removeClass(options.nextBtnClass).addClass(options.highlightRClass);
}
function noHighlightR() { //移除右按钮高亮效果
nextId.removeClass(options.highlightRClass).addClass(options.nextBtnClass);
}
function bind() {
prevId.unbind("click", scrollPrev); //click事件与swipe事件解绑
nextId.unbind("click", scrollNext);
imgs.unbind("swipeleft", scrollNext);
imgs.unbind("swiperight", scrollPrev);
if (isAutoPlay) {
if (scrollPrevId != -1) {
clearInterval(scrollPrevId);
scrollPrevId = -1;
}
if (scrollNextId != -1) {
clearInterval(scrollNextId);
scrollNextId = -1;
}
}
$("." + options.highlightTag + ":eq(" + (cur - 1) + ")").addClass(options.highlightTagClass).siblings().removeClass(options.highlightTagClass);
if (cur == 1) { //判断是否在第一个版面
nextId.bind("click", scrollNext); //给右按钮绑定click事件
imgs.bind("swipeleft", scrollNext); //触摸屏手指向左移图片向右滚
if (isAutoPlay) {
if (scrollNextId == -1) {
scrollNextId = setInterval(scrollNext, autoPlayTime);
}
}
highlightR(); //右按钮高亮
noHighlightL(); //左按钮移除高亮
} else if (cur == totalCur) { //判断是否在最后一个版面
if (isAutoPlay) {
if (scrollPrevId == -1) {
scrollPrevId = setInterval(scrollPrev, autoPlayTime);
}
}
prevId.bind("click", scrollPrev); //给左按钮绑定click事件
imgs.bind("swiperight", scrollPrev); //触摸屏手指向右移图片向左滚
highlightL(); //左按钮高亮
noHighlightR(); //右按钮移除高亮
} else {
nextId.bind("click", scrollNext); //绑定click事件与swipe事件
prevId.bind("click", scrollPrev);
imgs.bind("swipeleft", scrollNext);
imgs.bind("swiperight", scrollPrev);
if (isAutoPlay) {
if (direction == 0) {
if (scrollPrevId == -1) {
scrollPrevId = setInterval(scrollPrev, autoPlayTime);
}
} else {
if (scrollNextId == -1) {
scrollNextId = setInterval(scrollNext, autoPlayTime);
}
}
}
highlightR(); //右按钮高亮
highlightL(); //左按钮高亮
}
}
}
});
})(jQuery);