jquery+原生JS实现动态列表无缝滚动（封装方法）

其他滚动方法可见本作者其他文章

       initScroll(val,dom,num,className,time){
                       //val为要渲染的列表
                      //dom为包含这些元素块的父盒子
                      //num为可视区域可看到几个子元素
                      //className随便给就行，不能和其他的重复，因为keyframes 关键字不能重复
                        $(dom).css('animation', '')//首先清掉之前的动画，这里是为了防止多次设置
                       if(num> val.length){//如果数据量小于可视区域的量不进行配置
                        return
                       }else{//下面是对内容进行填充实现无缝滚动
                          for (let index = 0; index < num; index++) {
                               const element = val[index];
                               
                               val.push(element)
                           }
                        //    console.log(val);
                         const styleEl = document.createElement('style');
                        let per= -(val.length - num) / num*100
                           styleEl.type = 'text/css';
                           styleEl.innerHTML = `
                                    @keyframes `+className+` {
                                0% {
                                    top: 0%;
                                }
                                100% {
                                    top: `+per+`%
                                }
                                }
                        `;
                        
                            
                        
                         //  let height = $(dom).height()*num
                          // let time= height / (3*num)//这里是滚动所需的时间，有需要可以自行调整
                           $(dom).css('animation', className+' ' + time+ 's linear 0s infinite')
                                   $(dom).hover(//这里是实现鼠标移入停止滚动，鼠标移出继续滚动
                               function () {
                                   $(this).css("animation-play-state", "paused");
                               },
                               function () {
                                   $(this).css("animation-play-state", "running");
                               }
                           );
                           document.head.appendChild(styleEl);
                        
                                }
                        
                       
                   
                    
                    },

使用方法

 this.initScroll(this.gpsdata.list,'.jps_container',4,'move123',20)