Yueyongxiang
是她丶
采纳率100%
2017-07-25 03:45

轮播图在火狐浏览器上时快时慢

10
  • 兼容性
  • js
  • 轮播图
  • 火狐浏览器
  • jquery
已采纳

代码如下,我用的是移动定位盒子的left,在火狐上很明显,不知道为什么,在谷歌和IE下没有时快时慢,可有时会有些卡顿,谢谢指教!

 // 创建一个对象,DigsurGallery;
DigsurGallery = {};
// 为对象 DigsurGallery,创造一个属性 Rolling;
DigsurGallery.Rolling = function() {
    // 定义变量 speed,作用为速度;
    this.speed = 1;
    // 定义变量 timer ,作用为定时器名字;
    this.timer = null;
}
// initConfig 是对象下的一个方法,需要传入三个参数,盒子的id,数组的名字,是否需要滚动,是否需要点击按钮;
DigsurGallery.Rolling.prototype.initConfig = function(Container, picArray, HasSlider, HasButton) {
    // 声明一个变量接收 Container;
    var ContainerName = $("#" + Container);
    // 声明变量 oBox,创建一个div,id名称为"DigsurFallery-Rolling-box";
    var oBox = $("<div id='DigsurFallery-Rolling-box'></div>");
    // 将 oBox 拼接到oName中;
    ContainerName.append(oBox);

    // 为 DigsurFallery-Rolling-box 设置样式;
    $("#DigsurFallery-Rolling-box").css({
        "position": "relative",
        "width": "100%",
        "overflow": "hidden",
        "top": "20%",
        "border-radius": "5px",
        "-moz-user-select": "none",
        "-webkit-user-select": "none",
        "-ms-user-select": "none",
        "user-select": "none",
    })

    // 声明变量 oBox,创建一个div,id名称为"DigsurFallery-Rolling-content";
    var oContent = $("<div id='DigsurFallery-Rolling-content'></div>");
    // 将 oContent 拼接到 oBox中;
    oBox.append(oContent);
    // 为 DigsurFallery-Rolling-content 设置样式;
    $("#DigsurFallery-Rolling-content").css({
        "position": "absolute",
        "left": 0,
        "overflow": "hidden",
        "height": "100%",
    })

    // 循环创建 img标签,将picArray中的值传入每一个img的src中,拼接到 oContent中;
    for(var i = 0; i < picArray.length; i++) {
        var oimg = $("<img />")
        $(oimg).attr('src', picArray[i]);
        oContent.append(oimg);
    }
    // 为 img加样式 ;
    $("#DigsurFallery-Rolling-box img").css({
        "float": "left",
        "height": "90%",
        "box-shadow": "0px 0px 11px  #211f1f",
        "-webkit-box-shadow": "0px 0px 11px  #211f1f",
        "-moz-box-shadow": "0px 0px 11px  #211f1f",
        "border-radius": "5px",
        "margin-top":"5px",
    })
    // 为  DigsurFallery-Rolling-box 设置高度,高度为'window'宽度的35%;
    $("#DigsurFallery-Rolling-box").css("height", $(window).width() * 0.35);
    // 声明 BoxoffsetWidth,接收 DigsurFallery-Rolling-box的可视宽度;
    var BoxoffsetWidth = $("#DigsurFallery-Rolling-box")[0].offsetWidth;
    // 为DigsurFallery-Rolling-box下的img标签设置 margin-right,值为: DigsurFallery-Rolling-box的可视宽度的3%;
    $("#DigsurFallery-Rolling-box img").css("margin-right", BoxoffsetWidth / 100 * 3);
    // 声明变量,获取 DigsurFallery-Rolling-content下img的margin-right的 值;
    var ImgMarginRight = parseFloat($("#DigsurFallery-Rolling-content img").css('marginRight'));
    // 设置 DigsurFallery-Rolling-conten 下的img的宽度 为 DigsurFallery-Rolling-box的可视宽度;
    $("#DigsurFallery-Rolling-content img").css("width", BoxoffsetWidth);
    // 设置 DigsurFallery-Rolling-content 的宽度,值为 picArray的个数 乘 (DigsurFallery-Rolling-box的可视宽度+ DigsurFallery-Rolling-content下img的margin-right的 值);
    $("#DigsurFallery-Rolling-content").css("width", picArray.length * (BoxoffsetWidth + ImgMarginRight));

    // 设置 speed的速度为1;
    this.speed = 1;

    // 判断 HasSlider 的值;
    if(HasSlider == true) {
        // 声明  _this = this,作用为指向 DigsurGallery.Rolling ;
        var _this = this;
        // 创造函数 move ;
        function move() {
            // 创建定时器timer;
            _this.timer = setInterval(function() {
                //  设置 DigsurFallery-Rolling-content 的left 为DigsurFallery-Rolling-content的做偏移量 - speed的值;
                $("#DigsurFallery-Rolling-content").css("left", $("#DigsurFallery-Rolling-content").offset().left - _this.speed);
                // 做判断,如果 DigsurFallery-Rolling-content 的左偏移量  小于picArray的个数-1乘以图片的可视宽度加上marginright的值 在乘以-1的值;
                if($("#DigsurFallery-Rolling-content").offset().left < (picArray.length - 1) * (oimg[0].offsetWidth + ImgMarginRight) * -1) {
                    // DigsurFallery-Rolling-content 的left为0;
                    $("#DigsurFallery-Rolling-content").css("left", 0);
                }
            }, 1)
        }
        // 启动定时器;
        move();
        // 鼠标放上或者离开 容器 'DigsurFallery-Rolling-box'时清除或打开定时器; 
        $("#DigsurFallery-Rolling-box").mouseenter(function() { clearInterval(_this.timer); }).mouseleave(function() { move(); });
    }
    // 判断 HasButton的值;
    if(HasButton == true) {
        // 声明 oRetreat 创建 id为 'retreat' 的div;
        var oRetreat = $("<div id='retreat'></div>");
        // 将 oRectreat 拼接到oBox中;
        oBox.append(oRetreat);
        // 声明 RetreatSpan,创建 span标签,内容为 < ,后退;
        var RetreatSpan = $("<span> < </span>")
        // 将RetreatSpan拼接到oRetreat中;
        oRetreat.append(RetreatSpan);
        // 声明oAdvance,创建 id为'advance'的div;
        var oAdvance = $("<div id='advance'></div>");
        // 将oAdvance拼接到oBox中;
        oBox.append(oAdvance);
        // 声明AdvanceSpan,创建 span标签,内容为 > ,前进;
        var AdvanceSpan = $("<span> > </span>")
        // 将AdvanceSpan拼接到oAdvance中;
        oAdvance.append(AdvanceSpan);

        // retreat 的点击函数;
        $("#retreat").click(function() {
            // 声明index,获取 DigsurFallery-Rolling-content 的做偏移量 除以 图片的可视宽度的负值;
            var index = parseInt($("#DigsurFallery-Rolling-content").offset().left / -oimg[0].offsetWidth);
            // index 的值减1;
            index--;
            // 判断 如果index的值小于0的;
            if(index < 0) {
                // index 的值 等于 picArrat 的长度减去1;
                index = picArray.length - 1;
            }
            // 声明 temp 等于 图片的可视宽度加上图片的marginright的值  乘 index的 负值  ;
            var temp = (oimg[0].offsetWidth + ImgMarginRight) * index * -1;
            // 设置 DigsurFallery-Rolling-content 的left值为 temp的值
            $("#DigsurFallery-Rolling-content").css("left", temp);
        });
        // advance 的点击函数
        $("#advance").click(function() {
            // 声明index,获取 DigsurFallery-Rolling-content 的做偏移量 除以 图片的可视宽度的负值;
            var index = parseInt($("#DigsurFallery-Rolling-content").offset().left / -oimg[0].offsetWidth);
            // index 的值加1
            index++;
            // 判断 如果index的值大于 picArray的长度;
            if(index >= picArray.length) {
                // index 的值为 0;
                index = 0;
            }
            // 声明 temp 等于 图片的可视宽度加上图片的marginright的值  乘 index的 负值  
            var temp = (oimg[0].offsetWidth + ImgMarginRight) * index * -1;
            // 设置 DigsurFallery-Rolling-content 的left值为 temp的值
            $("#DigsurFallery-Rolling-content").css("left", temp);
        });
    }

    // 设置点击按钮的大小,需要传入三个值,分别为 最小值 min,和最大值max 和 中间值mid
    $.fn.fontFlex = function(min, max, mid) {
        // $this 指向调用的this
        var $this = this;
        // 窗口大小改变时函数
        $(window).resize(function() {
            // 为 retreat 设置样式
            $("#retreat").css({
                "width": "7%",
                "height": $("#retreat").width() * 2.3,
                "position": "absolute",
                "left": 0,
                "top": "30%",
                "background-color": "rgba(0, 0, 0, 0.3)",
                "text-align": "center",
                "color": "rgba(255,255,255,0.5)",
                "cursor": "pointer",
            }).hover(function() { $("#retreat").css("color", "rgba(255,255,255,1)") }, function() { $("#retreat").css("color", "rgba(255,255,255,0.5)") });
            // 为 retreat 下的span标签设置 line-height
            $("#retreat span").css("line-height", $("#retreat").height() + "px");

            // 为 advance 设置样式
            $("#advance").css({
                "width": "7%",
                "height": $("#advance").width() * 2.3,
                "position": "absolute",
                "right": 0,
                "top": "30%",
                "background-color": "rgba(0, 0, 0, 0.3)",
                "text-align": "center",
                "color": "rgba(255,255,255,0.5)",
                "cursor": "pointer",
            }).hover(function() { $("#advance").css("color", "rgba(255,255,255,1)") }, function() { $("#advance").css("color", "rgba(255,255,255,0.5)") });
            // 为 advance 下的span标签设置 line-height
            $("#advance span").css("line-height", $("#advance").height() + "px");

            // 声明size,用window的宽度 除以 mid
            var size = window.innerWidth / mid;
            // 判断 如果 size的值 小于 min的值
            if(size < min) {
                // size 的值 等于 min的值
                size = min;
            }
            // 判断 如果size的值大于 max的值
            if(size > max) {
                // size的值等于 max的值
                size = max;
            }
            // 为调用的的标签设置 'font-size'
            $this.css("font-size", size + "px");

            // 触发函数的时候执行 resize事件
        }).trigger('resize');
    };
    $("#retreat span").fontFlex(23, 60, 20);
    $("#advance span").fontFlex(23, 60, 20);
}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • showbo GoCityPass新加坡曼谷通票 4年前

    firefox下测试了没有问题,不过你这个间隔太短了,cpu是一直被占用,你的慢应该是机器cpu忽然被其他程序占用了导致的卡顿造成的吧

    点赞 评论 复制链接分享

为你推荐