SuperSlide轮播插件滚动高度或宽度不对的问题解决

声明：本文由w3h5原创，转载请注明出处：《SuperSlide轮播插件滚动高度或宽度不对的问题解决》 

SuperSlide 是一款比较实用的轮播插件，网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等都能实现，兼容包括 IE6 的绝大部分浏览器。

但是作者写的教程复杂难懂，有时需要摸索好久才能实现效果。

问题描述：

而且会存在一些问题，没有考虑到。今天就遇到一个问题，轮播的滚动距离出现偏移。

问题原因：

因为 SuperSlide 初始化后会自动计算（重置）li 的宽度和高度（左右滑动是宽度，上下滚动是高度）。所以 li 不能有padding 属性值和border 属性值。

注：有人说也不能有 margin 值，博主试了一下，设置 margin 好像没什么问题。

我给所有元素设置了怪异盒模型结构 box-sizing: border-box;所以出现上面的偏移问题。

如果是标准盒模型，会是以下效果。

那么不给 li 设置边距，怎么调整它的样式呢？

解决办法：

我们可以在 li 标签内再套一个 div 给 div 设置边距，这样就不会出现偏移问题了。

代码示例：

HTM：

   

       

           

•                

             

           

•                

             

           

•                

             

           

•                

             

       

   

CSS：

.slideTxtBox{

    width: 700px;

    padding: 20px;

    border: 2px solid #0a67fb;

    overflow: hidden;

}

.slideTxtBox ul li{

    width: 200px;

    margin: 10px;

}

.slideTxtBox ul li div{

    height: 300px;

    padding: 10px;

    border-radius: 50px;

    overflow: hidden;

    height: 100%;

}

.slideTxtBox ul li img{

    width: 100%;

}

JS：