最新新闻、最新文章,JavaScript实现无缝循环滚动(基于jQuery)。
JS代码如下:
<script type="text/javascript">
$(function () { if ($("#ulDynamic").height() > 200) { $("#ulDynamic").height(200); $("#ulDynamic").css("overflow", "hidden"); var scroll = new s("#ulDynamic", "#ulDynamic li", 30); //参数为滚动速度,单位毫秒 scroll.bind(); scroll.start(); } }); function s(containerSelector, childSelector, speed) { this.containerSelector = containerSelector; this.childSelector = childSelector; this.rotator = $(this.containerSelector); this.speed = speed || 30; this.tid = this.tid2 = this.firstLi = null; this.num = 0; this.liCount = $(this.childSelector).length; } s.prototype = { bind: function () { var o = this; this.rotator.hover(function () { o.end(); }, function () { o.start(); }); }, start: function () { if ($(this.childSelector).length == this.liCount) { this.firstLi = $(this.childSelector + ":first-child"); this.rotator.append(this.firstLi.clone()); } var o = this; this.tid = setInterval(function () { o.rotation(); }, this.speed); }, end: function () { clearInterval(this.tid); clearTimeout(this.tid2); }, rotation: function () { var o = this; var firstLi = $(this.childSelector + ":first-child"); this.num++; this.rotator[0].scrollTop = this.num; if (this.num == this.firstLi[0].scrollHeight + 0) { clearInterval(this.tid); this.firstLi.remove(); this.num = 0; this.rotator[0].scrollTop = 0; this.tid2 = setTimeout(function () { o.start(); }, 0); } } } </script>
页面代码如下:
<div>
<ul id="ulDynamic" style="margin:0px; padding:0px;"> <li>看1</li> <li>看这2</li> <li>的代码3</li> <li>动的代码4</li> <li>看码5</li> <li>看这的代码6</li> <li>看这个向上滚动的代码7</li> <li>看这个向动的代码8</li> <li>看向上滚动9</li> <li>看这个向动的代码10</li> <li>看这个向上的代码11</li> <li>看滚动的代码12</li> <li>看这个向上滚动的代码13</li> <li>看这个向上滚动的代码14</li> <li>看这个向上滚动的代码15</li> </ul> </div>
(水平有限,仅供参考。)