js文字无缝滚动，间歇滚动

1.无缝滚动

<div id="demo">
 <ul id="demo1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
 </ul>
 <div id="demo2"></div>
</div>

<script type="text/javascript">
 var speed=40
  // 向上滚动
  var demo=document.getElementById("demo");
  var demo2=document.getElementById("demo2");
  var demo1=document.getElementById("demo1");
  demo2.innerHTML=demo1.innerHTML
  function Marquee(){
    
    
   if(demo.scrollTop>=demo1.offsetHeight){
    
    
    demo.scrollTop=0;
   }
   else{
    
    
    demo.scrollTop=demo.scrollTop+1;
   }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function(){
    
    clearInterval(MyMar)}
  demo.onmouseout=function(){
    
    MyMar=setInterval(Marquee,speed)}
 //向下滚动
 // demo2.innerHTML=demo1.innerHTML
 // demo.scrollTop=demo.scrollHeight
 // function Marquee2(){
    
    
 //  if(demo1.offsetTop-demo.scrollTop>=0)
 //   demo.scrollTop+=demo2.offsetHeight
 //  else{
    
    
 //   demo.scrollTop--
 //  }
 // }
 // var MyMar2=setInterval(Marquee2,speed)
 // demo.οnmοuseοver=function() {clearInterval(MyMar2)}
 // demo.οnmοuseοut=function() {MyMar2=setInterval(Marquee2,speed)}
</script>

2.间歇滚动

<ul id="slider1">
	<li>111</li><li>222</li><li>333</li>
</ul>
//jq方法
   sliderText:function(){
    
    
       var flag=true;
       function slider(){
    
    
         if(flag){
    
    
           $("#slider1").animate({
    
    
               marginTop: "-22px"
           }, 1000, function () {
    
    
               $(this).css({
    
     marginTop: "0px" }).find("li:first").appendTo(this);
           })
         }
       }  
       setInterval(slider,4000);
       $("#slider1").mouseover(function(){
    
    
         flag = false;
       })
       $("#slider1").mouseout(function(){
    
    
           flag = true;
       })
     }

//vue中间歇滚动
 <ul id="slider1"  :class="{marquee_top:animate}">
  <li v-for="(item,index) in marqueeList" key="index">{
    
    {
    
    item.name}}</li>
</ul>
<script>
export default {
    
    
	data() {
    
    
	    return {
    
    
	      animate: false,
	      marqueeList: [
	        {
    
    
	          name: "1军电视剧烦恼是的空间开发"
	        },
	
	        {
    
    
	          name: "2军水电费了羧甲淀粉钠盛开"
	        },
	
	        {
    
    
	          name: "3军第三方库收到货否"
	        },
	
	        {
    
    
	          name: "4军杜师傅iOS"
	        }
	      ]
	    }
  },
   created: function() {
    
    
    // 页面显示
    setInterval(this.showMarquee, 2000);
  },
  methods: {
    
    
	showMarquee: function() {
    
    
      this.animate = true;
      setTimeout(() => {
    
    
        this.marqueeList.push(this.marqueeList[0]);
        this.marqueeList.shift();
        this.animate = false;
      }, 500);
    }
}
} 
</script>
<style>
//这个CSS非常重要，否则无法看到过渡效果
.marquee_top {
    
    
  transition: all 0.5s;
  margin-top: -30px;
}
</style>