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

为满足对IE9的兼容性,作者开发了一款前端轮播插件,仿照Swiper的功能,仅保留常用特性。文章分享了实现思路,包括计算slide宽度、设置页面切换动画等关键代码,并提到针对手机端触摸切换的优化策略,避免了滑动过程中的误触问题,提供良好用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近一直在写企业官网,轮播滚动图的效果很多,当然首选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: width + 'px',
            marginRight: space + 'px',
        })
        $(swiper.slides[swiper.slides.length - 1]).css('margin-right', '0
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值