使用kxbdmarquee.js实现图片垂直无间断滚动效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

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

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

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

实现步骤

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

  • 书写html代码，css样式。

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

关键代码与说明

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/kxbdMarquee.js"></script>
<script type="text/javascript">
    $(function () {
        $("#jqfree").kxbdMarquee({
            isEqual: false,所有滚动的元素长宽是否相等,true,false
            loop: 0,//循环滚动次数，0时无限
            direction: "up",//滚动方向，"left","right","up","down"
            scrollAmount: 1,//步长
            scrollDelay: 80//时长
        })
    })
</script>

更多的参数设置

参数说明：

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

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

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

  • scrollAmount:1, //步长

  • scrollDelay:20 //时长