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>