jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果

本文实例为大家分享了jquery.kxbdmarquee.js无缝滚动的具体代码,供大家参考,具体内容如下

strep1.页面引入相关文件

这里写图片描述



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

css样式:

jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果_第1张图片 

html结构:

jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果_第2张图片 

js效果:

这里写图片描述


 
 滚动轮播
 



 

效果图:

jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果_第3张图片

注意:

CSS 样式

/**
 * 父容器需要设置溢出隐藏
 * 如果是水平滚动,项目需要设置浮动
 */
#demo {overflow:hidden;}
#demo ul li {float:left;}


参数说明

jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果_第4张图片

代码:https://github.com/erdouzhang/jquery.kxbdmarquee.js
在线演示:https://erdouzhang.github.io/jquery.kxbdmarquee.js/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果)