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

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

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

可是做者写的教程复杂难懂，有时须要摸索很久才能实现效果。

问题描述：

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

问题缘由：

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

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

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

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

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

解决办法：

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

代码示例：

HTML：

<div class="slideTxtBox">     <div class="bd">         <ul>             <li>                 <img src="banner1.jpg" alt="">             </li>             <li>                 <img src="banner2.jpg" alt="">             </li>             <li>                 <img src="banner3.jpg" alt="">             </li>             <li>                 <img src="banner4.jpg" alt="">             </li>         </ul>     </div> </div>

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：

<script>     jQuery(".slideTxtBox").slide({         mainCell: ".bd ul",         autoPage: true,         effect: "left",         autoPlay: true,         vis: 3     }); </script>