最近一直在写企业官网,轮播滚动图的效果很多,当然首选Swiper插件,但是无奈公司要求在pc端的兼容性要保证i9+,而swiper从3.0版本开始就全面放弃了pc端并不再支持ie9,用过的其他插件如owl-carousel、flexslider等,都有一些不完善的地方,于是结合业务需求,自己实现了一个swiper,只保留了一些常用的功能。源码地址,里面有效果演示。
实现思路,只贴一些核心的代码块,首先一个标准的js插件应该是包裹在一个立即执行函数里面的,因为用到了jquery,所以将jquery也传传入参数里面
(function (global, $, factory) {
global.Swiper = factory();
})(window, jQuery, function () {
//代码核心逻辑
return Swiper
})
计算每一个slide的宽度,需要三个参数分别为最外层div宽度,每一个页的slide个数,和每个之间的间距
function upDateSlide(outerWidth, num, space) {
var swiper = this;
var width = (outerWidth - (space * (num - 1))) / num;
swiper.singleWidth = width;
swiper.slides.css({
width