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>

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

html轮播图水平传送带,12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
点击左右有缝轮播html,超帅轮播插件tabstools.js教程之实现数字+箭头+多栏轮播
摘要: 前面我们讲了tabstools.js插件可实现多种轮播,如:选项卡轮播.数字轮播.缩略图轮播.卡盘轮播.等等,今天我们再来了解下多栏轮播效果...... 万万没想到!写这篇文章竞是在两个月之后 ...
网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
3d饼图 vue_这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
介绍在Web网页开发中,我们经常需要用到图片轮播,在以往传统的开发方式中有很多基于jquery的插件可供使用,但是随着目前各类前端框架层出不穷的现状,在某些方面特别是针对特定的场景,还是有不少地方不 ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
一款好用的轮播插件swiper，适用于移动端和web
swiper的dom布局 <div id="commentsSwiper" class="swiper-container"><div cla ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
AdPlayBanner：功能丰富、一键式使用的图片轮播插件
概述 AdPlayBanner:功能丰富.一键式使用的图片轮播插件详细代码下载:http://www.demodashi.com/demo/11312.html AdPlayBanner是一个An ...
html轮播图水平传送带,经典的白富美型jQuery图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...