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

最新推荐文章于 2025-05-30 15:52:55 发布

原创

最新推荐文章于 2025-05-30 15:52:55 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js轮播效果 #开发插件 #前端

为满足对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

最低0.47元/天解锁文章

200万优质内容无限畅学