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>声明：本文由w3h5原创，转载请注明出处：《SuperSlide轮播插件滚动高度或宽度不对的问题解决》 https://cloud.tencent.com/developer/article/1537390
(adsbygoogle = window.adsbygoogle || []).push({});本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录