js实现无缝滚动

最新推荐文章于 2023-11-10 12:46:32 发布

兔子敲代码

最新推荐文章于 2023-11-10 12:46:32 发布

阅读量86

点赞数

文章标签： js css html vue javascript

本文链接：https://blog.csdn.net/qq_38499671/article/details/109237869

版权

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);