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);

View Code