深圳网站建设、深圳建网站、网站建设公司定制属于您的高端个性化网站!

搜索深圳网站建设相关案例及相关信息 服务热线:13530005572/15112579390
首页 > 网站建设知识 > 一个滚动图片的Jquery插件

一个滚动图片的Jquery插件

  • 所属分类:网站建设知识
  • 作者: 独占网络
  • 更新时间: 2015-4-1 10:00:51
  • 返回列表
我们经常使用到滚动图片,那我们下面就来讲一个滚动图片的插件
(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 });
有问题找深圳网站建设独占网络

相关推荐

独占网络

专业开发/高端制作

您值得信任的网站建设专家!

为其提供系统的基于互联网的品牌行销策略 、 创意执行 、 追踪运营服务 。