无缝滚动--jquery.kxbdmarquee.js

erdouzhang

于 2017-02-14 21:35:52 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：轮播

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/55106785

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：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;