使用kxbdmarquee.js模拟Marquee，实现图片无间断滚动内容，支持手机效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用jquery.kxbdmarquee.js制作图片无缝滚动效果。本案例可实现图片无缝滚动，鼠标滑过暂停滚动、鼠标滑出继续滚动。可配置向左或者向右滚动。支持响应式效果

kxbdmarquee.js可以模拟Marquee，可以无间断滚动图片或者文字等内容，kxbdmarquee.js支持多种属性，可以配置滚动方向为向上向下或者向左向右还有循环滚动次数等等

相比marquee，kxbdmarquee.js更兼容其他浏览器，同时也添加了更多的属性效果。

手机效果.jpg
手机效果

实现步骤

  • 首先要引用必须的js文件：jquery.min.js、kxbdmarquee.js

  • 书写html代码，css样式。

  • kxbdmarquee.js插件初始化 ，初始化可以根据id，也可以根据类名

关键代码与说明

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.kxbdmarquee.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //根据类名 marquee初始化
        $('.marquee').kxbdMarquee({
            //滚动方向向左滚动
            direction: 'left'
        });
    });
</script>

参数说明

  • isEqual:true, //所有滚动的元素长宽是否相等,true,false

  • loop:0, //循环滚动次数，0时无限

  • direction:"left", //滚动方向，"left","right","up","down"

  • scrollAmount:1, //步长

  • scrollDelay:20 //时长