我們經常使用到滾動圖片，那我們下面就來講一個滾動圖片的插件
(function ($) {
    $.fn.DuZhanScroll = function (options) {
        var defaults = {
            //默認的參數
            leftbtn: "",
            showclass: "showInfo",
            rightbtn: "",
            showleg: ""

        };
        //得到參數
        var options = $.extend(defaults, options);
        //定義當前的位置
        var showindex = 0;
        var leg = $(options.showclass + " li").length;
        var movewidth = $(options.showclass + " li").outerWidth(true);
        var leftbtninfo = $(options.leftbtn);
        var rightbtninfo = $(options.rightbtn);
        var showleginfo = options.showleg;
        var flag = 0;
        //點擊事件
        leftbtninfo.live("click", function () {
            if (flag == 0) {
                flag = 1;
                showindex--;
                showMove()
            }
        });
        //點擊事件
        rightbtninfo.live("click", function () {
            if (flag == 0) {
                flag = 1;
                showindex++;
                showMove()
            }
        });


        function showMove(index) {
            //得到需要移動的距離
            var nowLeft = -showindex * movewidth;
            //如果小于0
            if (showindex < 0) {
                //將后一張圖片放到張圖片上面
                $(options.showclass).prepend($(options.showclass + " li:last").clone());
                //將當前的參數放置存放一張圖片的距離
                $(options.showclass).css("left", -movewidth);
                $(options.showclass).stop(true, false).animate({ "left": 0 }, 500, function () {
                    flag = 0;
                    showindex++;
                    $(options.showclass + " li:last").remove();
                });

            } else if (leg - showleginfo <= showindex) {

                 //將張圖片放到后一張
                $(options.showclass).append($(options.showclass + " li:first").clone());

                $(options.showclass).stop(true, false).animate({ "left": nowLeft }, 500, function () {
                    flag = 0;
                    showindex--;
                    $(this).css("left", (nowLeft + movewidth));
                    $(options.showclass + " li:first").remove();

                });
            } else {

                $(options.showclass).stop(true, false).animate({ "left": nowLeft }, 500, function () {
                    flag = 0;

                });

            }
        }

    }
})(jQuery)

后就是我們調用方法
$(".indexscool").DuZhanScroll({ showclass: ".indexscool", leftbtn: ".l_an", rightbtn: ".r_an", showleg: 4 });
有問題找深圳網站建設：獨占網絡