移动端轮播图不能充满外框,缺1px的问题

代码如下:
  

问题解析:
      在浏览器dom渲染中,对于div等dom元素的渲染,会对非整数宽度的dom自动渲染为整数宽度,比如说100.5px的宽度,将被渲染为101px,小数点后数值进1;但是类似于img标签等内部标签,在渲染中会对小数点后数值直接舍弃,例如,100.5px直接变为100px,因此,可以看到dom在移动端浏览器展示的结果总是图片距离外框边缘具有1px的距离。

解决办法:
      在js中动态渲染轮播图片外框".mui-slider-item"的高度添加1px; 通过原生的方法获取到下标0的".mui-slider-item"的宽度,这个宽度通过赋值给一个全局变量,在把变量循环赋值到每一个".mui-slider-item"。

代码如下: 
 var imgBox = document.getElementsByClassName('mui-slider-item');
            var heigthBox = imgBox[0].offsetWidth;
            console.log(heigthBox);
            for(var i=0;i

解决原理:
在js取值中,对于非整数的宽度,取到的是进过小数点的整数,因此,这里取值之后的数值就是100.5进1之后的数值101,将他直接赋值到dom,即可解决,但是框架轮播图原本的图片移动距离未曾变化,还是原来的变化值,只是在最后一张图片到位后直接变回了第一张,会出现一个短距离的快速切换,轮播动画略有卡顿。
解决虽不完美,但应急尚可,留待以后找到更好的解决思路。

你可能感兴趣的:(移动端轮播图不能充满外框,缺1px的问题)