最新新闻、最新文章,JavaScript实现无缝循环滚动
最新新闻、最新文章,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>
(水平有限,仅供参考。)