infiniteSlide jQuery插件允许您创建响应式、自动滚动、无限循环滚动器，使用CSS3动画实现平滑滚动效果。

支持水平和垂直方向。基于CSS3 flexbox模型的响应式布局。

通常为图像滑块设计，也支持混合内容。

如何使用它:

1.为滚动条创建一个图像列表。

<ul class="demo">
  <li><img src="1.jpg" alt="" /></li>
  <li><img src="2.jpg" alt="" /></li>
  <li><img src="3.jpg" alt="" /></li>
  <li><img src="4.jpg" alt="" /></li>
  <li><img src="5.jpg" alt="" /></li>
  <li><img src="6.jpg" alt="" /></li>
  ...
</ul>

2.加载jQuery库后，下载并加载jQuery infiniteSlide插件的脚本。

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="infiniteslidev2.js"></script>

3.调用html列表上的函数来创建一个基本的滚动条。

$('.demo').infiniteslide();

4.更改默认动画速度。

$('.demo').infiniteslide({
  'speed': 100
});

5.更改默认滚动方向。

$('.demo').infiniteslide({
 
  // up/down/left/right
  'direction': 'left'
  
});

6.启用/禁用“悬停时暂停”功能。

$('.demo').infiniteslide({
  'pauseonhover': true
});

7.使滚动条在所有浏览器中都能完全响应。

$('.demo').infiniteslide({
  'responsive': true // default: false
});

8.指定在没有足够项目的情况下要克隆的项目数。

$('.demo').infiniteslide({
  'clone': 1
});

更新日志：

2022-02-15

• 修复变量作用域的问题

2021-09-28

• 固定缩小版

2020-08-24

• 为克隆的元素启用事件激发

2018-10-02

• v2

2018-09-15

• 更新infiniteslide.v2.min.js

预览截图

无限自动滚动插件 jQuery 无限滑动