jQuery图片滚动插件

//该组件目前仅适用于一次移动一张图片的情况
(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);