无缝滚动--jquery.kxbdmarquee.js

最新推荐文章于 2025-09-18 11:28:33 发布

原创

最新推荐文章于 2025-09-18 11:28:33 发布 · 4.4k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何使用jquery.kxbdmarquee.js实现无缝滚动效果，包括页面引入文件、HTML结构、CSS样式和JavaScript代码的编写。提供了在线演示链接和本地插件下载地址，帮助读者轻松实现滚动特效。

代码：https://github.com/erdouzhang/jquery.kxbdmarquee.js
在线演示：https://erdouzhang.github.io/jquery.kxbdmarquee.js/
本地下载插件：jquery.kxbdmarquee.js下载

效果图：

这里写图片描述

strep1.页面引入相关文件

这里写图片描述

<script src="lib/jquery/jquery.js"></script>
<script src="lib/jquery/jquery.kxbdmarquee.js"></script>

step2.写html结构、css样式、js

css样式：
这里写图片描述

html结构：

这里写图片描述

js效果：

这里写图片描述

<head>
    <meta charset="UTF-8">
    <title>滚动轮播</title>
    <style type="text/css">
*{
    
    margin:0;padding:0;}
body{
    
    font-size:12px;}
a{
    
    color:#333;}
ul{
    
    list-style:none;}
#demo1{
    
    position:absolute;top:80px;left:50px;width:310px;height:45px;overflow:hidden;background:#333;border:2px solid #333;}
#demo1 ul li{
    
    float:left; padding:0 1px;

最低0.47元/天解锁文章