动态轮播滚动效果

学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕 ~~，谢谢大家⭐️⭐️⭐️~

做的一个简单的小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>

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

效果图如下：

谢谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕