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>