本文實例為大家分享了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;}#demo1 ul li img{display:block;}#demo2{position:absolute;top:80px;left:400px;width:300px;height:25px;overflow:hidden; background:#ff6633;}#demo2 ul li{float:left; padding:0 10px; line-height:25px;}#demo3{position:absolute;top:150px;left:50px;width:60px;height:235px;overflow:hidden;background:#333;border:2px solid #333;}#demo3 ul li{float:left; padding:1px 0;}#demo3 ul li img{display:block;}#demo4{position:absolute;top:150px;left:400px;width:200px;height:200px; overflow:hidden;background:#EFEFEF;}#demo4 ul li{float:left; width:180px; padding:10px; line-height:20px;}</style></head><body> <div id="demo1"> <ul> <li><img src="img/01s.jpg" width="60" height="45"></li> <li><img src="img/02s.jpg" width="60" height="45"></li> <li><img src="img/03s.jpg" width="60" height="45"></li> <li><img src="img/04s.jpg" width="60" height="45"></li> <li><img src="img/05s.jpg" width="60" height="45"></li> <li><img src="img/06s.jpg" width="60" height="45"></li> <li><img src="img/07s.jpg" width="60" height="45"></li> <li><img src="img/08s.jpg" width="60" height="45"></li> </ul> </div> <div id="demo2"> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告一</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告二新聞公告二新聞公告二新聞公告二</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告三新聞公告三</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告四新聞公告四新聞公告四</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告六新聞公告六新聞公告六</a></li> </ul> </div> <div id="demo3"> <ul> <li><img src="img/01s.jpg" width="60" height="45"></li> <li><img src="img/02s.jpg" width="60" height="45"></li> <li><img src="img/03s.jpg" width="60" height="45"></li> <li><img src="img/04s.jpg" width="60" height="45"></li> <li><img src="img/05s.jpg" width="60" height="45"></li> <li><img src="img/06s.jpg" width="60" height="45"></li> <li><img src="img/07s.jpg" width="60" height="45"></li> <li><img src="img/08s.jpg" width="60" height="45"></li> </ul> </div> <div id="demo4"> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告一新聞公告一</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二新聞公告二</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告三新聞公告三新聞公告三新聞公告三</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告四新聞公告四新聞公告四新聞公告四新聞公告四新聞公告四</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告五新聞公告五新聞公告五新聞公告五新聞公告五</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞公告六新聞公告六新聞公告六新聞公告六新聞公告六新聞公告六</a></li> </ul> </div> <script src="lib/jquery/jquery.js"></script> <script src="lib/jquery/jquery.kxbdmarquee.js"></script> <script> (function(){ $("#demo1").kxbdMarquee({direction:"right"}); $("#demo2").kxbdMarquee({isEqual:false}); $("#demo3").kxbdMarquee({direction:"down"}); $("#demo4").kxbdMarquee({direction:"up",isEqual:false}); })(); </script></body>效果圖：
注意：
CSS 樣式
/** * 父容器需要設置溢出隱藏 * 如果是水平滾動，項目需要設置浮動 */#demo {overflow:hidden;}#demo ul li {float:left;}參數說明
代碼：https://github.com/erdouzhang/jquery.kxbdmarquee.js
在線演示：https://erdouzhang.github.io/jquery.kxbdmarquee.js/
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
