许多数据 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;//需要清除的动画 
    
    评论

报告相同问题?

悬赏问题

  • ¥88 实在没有想法,需要个思路
  • ¥15 MATLAB报错输入参数太多
  • ¥15 python中合并修改日期相同的CSV文件并按照修改日期的名字命名文件
  • ¥15 有赏,i卡绘世画不出
  • ¥15 如何用stata画出文献中常见的安慰剂检验图
  • ¥15 c语言链表结构体数据插入
  • ¥40 使用MATLAB解答线性代数问题
  • ¥15 COCOS的问题COCOS的问题
  • ¥15 FPGA-SRIO初始化失败
  • ¥15 MapReduce实现倒排索引失败