背景图片切换实现轮播效果，并解决抖动问题

应用场景

页面需要做持续性图片切换的效果。考虑到页面的性能消耗，采用css3控制一张sprite背景图切换来实现效果。

部分代码展示

这里是一个宽高比2：1的图片

.want-club {
position: relative;
width: 36%;
height: 0;
padding-bottom: 36%;
background-image: url(../assets/images/map/bg-hotkid01.png);
background-repeat: no-repeat;
background-size: 200%;
}

.toggle-bg {
animation: toggle-bg 1s steps(2) infinite;
}
@keyframes toggle-bg {
0% {
background-position: 0 0;
}
100% {
background-position: 200% 0%;
}
}

发现问题

当sprite背景图切换的时候，发现偶尔会有两张图片位置对不上，导致图片轻微抖动。

这是由于节点宽度使用百分比所导致的。取得的宽度数值含有一个小数，会影响页面背景图的移动偏差

解决办法

用js取整，重新赋值它的宽度就好了。

首先在页面节点渲染好后，用js获取容器当前的宽度，然后使用Math.round()取整后重新给容器赋值宽度。我的问题就是这样解决的