写轮播插件时遇到的坑

css

father{
    font-size: 0;
}
chlidren{
  display:inline-block;
}

关于 在使用 display:inline-block;之后会莫名其妙出现空隙一直不只是为什么,在网上搜索后发现 添加在他的父元素节点上设置css font-size:0 即可解决莫名空隙。

具体原因不知。等待查阅。

jQuery

在使用 JQuery库动态修改css line-height 行高样式时报错

    containerItems.css({
        'width': width,
        'height': height,
        'line-height':height + 'px'
    });

原来是因为 设置行高时要添加 ‘px’ 而 width 和 height 则可省略

    if (index > currentIndex) {
        ref.animate({
            left: -offset + 'px' //动画还未执行完毕,此时改设置覆盖了外部css()设置
        }, function() {
            var i = currentIndex;
            while (i != index) {
                ref.append(ref.children().first());
                i++;
            }
            ref.css('left', 0);//这样才会修改css样式
        });
        // ref.css('left', 0);  //写在外部不会修改ref容器的css样式
    }

animate()方法异步回调问题,外部修改的css样式又被内部css()修改了,所以只能写在内部。因为animate动画还在执行。

你可能感兴趣的:(写轮播插件时遇到的坑)