简单的产品图轮播（基于jQuery）

Posted 2021-04-08 listentolife

    最近在尝试整理自己做过的一些功能，然后重新基于jQuery改写了一下以前写过的产品图轮播模块。然后也加入了bootstrap的自适应做展示：

这里大致做一下分享：

    旧版本做的是在学习中留下的一个实现。实现中借鉴jQuery声明了一个对象，然后定义了获取指定id的元素，指定class的元素集合及兼容IE的事件监听的公共函数，再在这个基础上实现产品图轮播。

    这次优化的把这一部分改成基于jQuery框架，通过 $() 来获取DOM节点跟更新节点，通过 .click() 来完成事件监听。

    优化中继承了之前的布局。布局中，轮播大图仅一张产品图，下方的小图的数量单独声明，可修改。大小图的部分都有前后轮转的按钮，大图部分可以直接前后图轮转，小图部分可以直接轮转前后一行小图。

    但是旧版本做的是只能前后轮转，到了大图第一张或最后一张，小图第一行跟最后一行的时候都是无法头尾相连轮转。新版本上优化了这部分功能，使其能头尾相连，这样体验会更流畅。

    旧版本中并没有做自适应部分功能，所以优化的过程中我增加了自适应的功能。除了引入bootstrap做了自适应布局，当浏览器宽度小于768像素时，会隐藏小图部分，并在大图上显示小圆点以表示图片数量。当宽度大于768像素时，则会隐藏小圆点。这样在布局上会比较接近海报轮播效果。

    旧版本中还实现了键盘的事件监听。但是鉴于实际使用中键盘操作会比较少，所以这部分功能放弃掉了。

    当然，还是有可以优化的部分。比如，既然做了自适应，那么其实这个轮播更适合在移动端浏览，那就应该加入更多移动端的元素。所以是可以添加手势事件的监听。还有，还是可以优化添加动画效果，让图片轮转过程更加流畅。

    留一个代码链接：https://github.com/listentolife/ResponsiveCarousel