js实现无缝滚动

html结构:

 <div class="qw-slide-box"> 
 <ul class="js-slide-list">
 <li>
 <p>1您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>2您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>3您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>4您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>5您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>6您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>7您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>8您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 </ul>
 </div>

实现思路:
获得js-slide-list下第一个li元素的高度,对它的height或marginTop进行一个从有到无的动画变化,代码如下:

var doscroll = function(){
 var $parent = $('.js-slide-list');
 var $first = $parent.find('li:first');
 var height = $first.height();
 $first.animate({
 height: 0 //或者改成: marginTop: -height + 'px'
 }, 500, function() {// 动画结束后,把它插到最后,形成无缝
 $first.css('height', height).appendTo($parent);
 // $first.css('marginTop', 0).appendTo($parent);
 });
 };
 setInterval(function(){doscroll()}, 2000);