像新闻类的版块经常要求一条条的新闻滚动出现，要实现这种效果，可以使用jQuery无缝滚动插件liMarquee。
注意：
1. 它的兼容性是IE7+，及现代浏览器。
2. 引用的jquery的版本最好是在1.9以上。
问题：
在实现突破链接滚动时，经常会遇到ul的部分li元素会换行
原因：
原因是li元素设置了margin-left或margin-right，或者是li里面的a标签设置了margin-left或margin-right，导致ul的宽度小于其所有子元素的宽度、margin、padding的和。
解决方法：
在js中手动设置ul的width即可。
下面代码包括文字和图片链接的滚动：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)</title> <style> *{ margin: 0; padding: 0; } /*Plugin CSS*/ .str_wrap { overflow:hidden; *zoom:1; width:100%; font-size:12px; line-height:16px; position:relative; -moz-user-select: none; -khtml-user-select: none; user-select: none; background:#f4f4f4; white-space:nowrap; } .str_move { white-space:nowrap; position:absolute; top:0; left:0; cursor:move; } .str_move_clone { display:inline-block; *display:inline; *zoom:1; vertical-align:top; position:absolute; left:100%; top:0; } .str_vertical .str_move_clone { left:0; top:100%; } .str_down .str_move_clone { left:0; bottom:100%; } .str_vertical .str_move, .str_down .str_move { white-space:normal; width:100%; } .str_static .str_move, .no_drag .str_move, .noStop .str_move{ cursor:inherit; } .str_wrap img { max-width:none !important; } /*图片*/ .img-main{ width: 1000px; height: 168px; margin: 30px auto 0; font-size: 0; padding: 20px 0; background-color: #f7f7f7; } .img-list{ width: 1000px !important; height: 166px; margin: 0 auto; background-color: #f7f7f7; } .img-list a{ display: inline-block; width: 120px; height: 164px; margin-left: 24px; border: 1px solid #d7d6d6; } /*文字*/ .news-list{ width: 488px; height: 210px; margin: 30px auto 0; border: 1px solid #e7e6e6; } .news-list ul{ line-height: 40px; padding-left: 5px; background-color: #f4f4f4; } .news-list li a{ display: block; overflow: hidden; width: 448px; padding-left: 24px; font-size: 14px; color: #595858; text-decoration: none; } .news-list li a:hover{ text-decoration: underline; } </style> </head> <body> <!--图片链接--> <div class="img-main"> <div class="img-list"> <a href=""><img src="./img/photo-1.png" alt=""></a> <a href=""><img src="./img/photo-2.png" alt=""></a> <a href=""><img src="./img/photo-3.png" alt=""></a> <a href=""><img src="./img/photo-4.png" alt=""></a> <a href=""><img src="./img/photo-5.png" alt=""></a> <a href=""><img src="./img/photo-2.png" alt=""></a> <a href=""><img src="./img/photo-1.png" alt=""></a> <a href=""><img src="./img/photo-2.png" alt=""></a> <a href=""><img src="./img/photo-3.png" alt=""></a> </div> </div> <!--文字链接--> <div class="news-list"> <ul> <li><a href="" title=""><span class="text">网站内容添加的教学视频</span><span class="date">[07-23]</span></a></li> <li><a href="" title="国家级精品资源共享课建设要求"><span class="text">国家级精品资源共享课建设要求</span><span class="date">[07-21]</span></a></li> <li><a href="" title="2012年国家级精品资源共享课评审"><span class="text">2012年国家级精品资源共享课评审</span><span class="date">[07-21]</span></a></li> <li><a href=""><span class="text">关于制订课程标准的原则及管理办</span><span class="date">[07-21]</span></a></li> <li><a href=""><span class="text">河北旅游职业学院课程建设规划及</span><span class="date">[07-21]</span></a></li> <li><a href=""><span class="text">网站内容添加的教学视频</span><span class="date">[07-20]</span></a></li> <li><a href=""><span class="text">网站内容添加的教学视频</span><span class="date">[07-20]</span></a></li> <li><a href=""><span class="text">网站内容添加的教学视频</span><span class="date">[07-20]</span></a></li> <li><a href="" title=""><span class="text">网站内容添加的教学视频</span><span class="date">[07-23]</span></a></li> </ul> </div> <script src="./js/jquery-1.11.3.min.js"></script> <script src="./js/jquery.liMarquee.js"></script> <script> $(function(){ //图片向右滚动 $(".img-list").liMarquee({ direction:'right', scrollamount:30 }); //文字向上滚动 $(".news-list").liMarquee({ direction:'up', scrollamount:30 }) }) </script> </body> </html>