一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。
学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
做的一个简单的小demo,具体需求和样式可以根据自己的样式去修改哦~具体代码如下：
html部分
<div class="slide-container"><!--css设置时，注意高度是显示多少个item,如：item的高度是30px，显示3个，高度则是 3*30 = 90px -->
<ul class="slide-list js-slide-list">
<li class="odd"><span>item1</span><span>item1</span><span>item1</span></li>
<li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
<li class="even"><span>item3</span><span>item3</span><span>item3</span></li>
<li class="odd"><span>item4</span><span>item4</span><span>item4</span></li>
<li class="even"><span>item5</span><span>item5</span><span>item5</span></li>
<li class="even"><span>item6</span><span>item6</span><span>item6</span></li>
</ul>
</div>
js部分
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);
效果图如下：
谢谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
