许多数据 2016-01-12 06:31 采纳率: 26.3%
浏览 1371

控制图片滚动,js代码在chrome里没效果在其他浏览器有效果

//客户合作 图片滚动
$('.imgs-scroll').newsScroll({ className: 'imgs-scroll', scrollElements: 'li', scrollDirection: 'left' });

$.fn.extend({
newsScroll: function (opt) {
if (!opt) opt = {};
opt = {
className: opt.className,//滚动外框的class值
scrollElements: opt.scrollElements,//滚动的标签
scrollSpeed: opt.scrollSpeed || 2000,//定义滚动间隙时间
scrollDirection: opt.scrollDirection || 'up'
}

    var sumtemp = 0;
    if (opt.scrollDirection == 'up' || opt.scrollDirection == 'down') {
        $('.' + opt.className + ' ' + opt.scrollElements).each(function () {
            sumtemp += $(this).height();
        })
        if ($('.' + opt.className).height() >= sumtemp) {
            return false;
        }
    }

    if (opt.scrollDirection == 'left' || opt.scrollDirection == 'right') {
        $('.' + opt.className + ' ' + opt.scrollElements).each(function () {
            sumtemp += $(this).width();
        })
        if ($('.' + opt.className).width() >= sumtemp) {
            return false;
        }
    }


    var _moving;//需要清除的动画 
    $('.' + opt.className).hover(function () {
        clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动 
    }, function () {
        _moving = setInterval(function () {
            var _field = $('.' + opt.className).find(opt.scrollElements + ':first');//此变量不可放置于函数起始处,li:first取值是变化的
            var _h = _field.height();//取得每次滚动高度
            var _w = _field.width();//取得每次滚动宽度

            if (opt.scrollDirection == 'up') {
                _field.animate({ marginTop: -_h + 'px' }, 'slow', function () {//通过取负margin值,隐藏第一行
                    _field.css('marginTop', 0).appendTo($('.' + opt.className));//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动 
                })
            } else if (opt.scrollDirection == 'down') {
                _field.animate({ marginTop: _h + 'px' }, 'slow', function () {
                    _field.before($('.' + opt.className + ' ' + opt.scrollElements + ':last'));
                    $('.' + opt.className).find(opt.scrollElements).css({ marginTop: 0 });
                })
            } else if (opt.scrollDirection == 'left') {
                _field.animate({ marginLeft: -_w + 'px' }, 'slow', function () {
                    _field.css('marginLeft', 0).appendTo($('.' + opt.className));
                })
            } else if (opt.scrollDirection == 'right') {
                _field.animate({ marginLeft: _w + 'px' }, 'slow', function () {
                    _field.before($('.' + opt.className + ' ' + opt.scrollElements + ':last'));
                    $('.' + opt.className).find(opt.scrollElements).css({ marginLeft: 0 });
                })
            }
        }, opt.scrollSpeed)//滚动间隔时间取决于opt.scrollSpeed
    }).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动 
}

})

  • 写回答

1条回答 默认 最新

  • Go 旅城通票 2016-01-12 08:42
    关注

    没看出什么问题

     alert(1111111)//加这句看执行没有,没有的话就是你上面宽度计算有问题直接return掉了。。说明样式有问题导致大小计算失败
                var _moving;//需要清除的动画 
    
    评论

报告相同问题?

悬赏问题

  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题:求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 来真人,不要ai!matlab有关常微分方程的问题求解决,
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab,jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算