bxCarousel.js一款图片无缝滚动jQuery插件，可左右切换
  • 分享到微信朋友圈
    X
立即下载 查看演示

BxCarousel是一款基于jQuery的图片轮播插件，以其丰富的功能和良好的用户体验著称。它允许用户自定义显示的图片数量、设置每次滚动时图片的移动数量，并支持自动播放功能。此外，还提供了前后按钮控制，方便用户手动切换图片。

在BxCarousel插件中，前一张与后一张按钮的添加不仅是基本功能之一，更是提升用户体验的关键环节。通过这两个按钮，用户可以自由地向前或向后浏览图片，不再受限于自动播放的节奏。

使用方法

1. 在 HTML 文档中包含 jQuery 库和 bxCarousel.js。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bxCarousel.js" type="text/javascript"></script>

2. bxCarousel初始化。

<script type="text/javascript">
    $(function () {
        $('#product').bxCarousel({
            display_num: 5, //展示图片的数量
            move: 5, //每次滚动移动图片的数量
            margin: 30, //图片间的间距
            auto_interval: 5000, //当设为自动滚动时间
            auto: true, //是否自动滚动
            auto_hover: true //滚动时，鼠标滑上图片时是否停止滚动
        });
    });
</script>

更多的参数设置

bxCarousel参数说明：

  • move：每次滚动移动图片的数量，默认为4。

  • display_num：展示图片的数量，默认为4。

  • speed：图片滚动速度，默认为500毫秒。

  • margin：图片间的间距，默认为0。

  • auto：是否自动滚动，默认为false。

  • auto_interval：当设为自动滚动时间，每次滚动的时间间隔（毫秒），默认为2000毫秒即2秒。

  • auto_dir：自动滚动的方向，默认为next，你可以试下prev。

  • next_image：向右滚方向按钮图片，可以用CSS设置。

  • prev_image：向左滚方向按钮图片，可以用CSS设置。

  • auto_hover：滚动时，鼠标滑上图片时是否停止滚动，默认为false。

  • controls：是否显示左右滚动按钮图片，默认为true。