手写一个轮播插件,效果和Swiper一样并兼容到ie9

最近一直在写企业官网,轮播滚动图的效果很多,当然首选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
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值