原生javascript实现新闻展示（无缝滚动/上下翻页切换）

如果你需要用原生js实现新闻滚动的效果，希望这篇博客能帮到你：
1、新闻的无缝滚动
css代码：

*{
   	margin: 0;padding: 0;
   }
.fl{float: left;margin: 0 5px;}
.clearfix{}
.clearfix:after{
	content: '';
	clear: both;
	display: block;
	height: 0;
	width: 0;
	visibility: hidden;
}

#demo{
     width:1000px;
     height:30px;
     overflow:hidden;
     line-height:30px;
     margin: 0 auto;
   }
   #demoin {
     width: 900px;
     height: 30px;
     margin: 0 auto;
     white-space: nowrap;
     overflow: hidden;
   }
   #demo1, #demo2{float: left;}

   .newsList li{
   	margin: 0 5px;
   	background: #ccc;
   }

html代码：

<div id="demo">
   <div id="demoin">
     <div id="box" style="width: 9999px;">
     	<div id="demo1">
		    <ul class="clearfix newsList">
		    	<li class="fl"><a href="#">1--SVP Global Ventures - SV Pittie Shoar Textiles Contton Plant--1</a></li>
		    	<li class="fl"><a href="#">2--SV Pittie Shoar Textiles --2</a></li>
		    	<li class="fl"><a href="#">3--SVP Global Venturest--3</a></li>
		    	<li class="fl"><a href="#">4-- Pittie Shoar Textiles Contton Plant--4</a></li>
		    	<li class="fl"><a href="#">5--SVP Global Ventures - SV Pittie Shoar Textiles Contton Plant--5</a></li>
		    	<li class="fl"><a href="#">6--SVP Global Ventures - SV Pittie Shoar Textiles Contton Plant--6</a></li>
		    </ul>
	    </div>
	     <div id="demo2"></div>
     </div>
   </div>
</div>

js代码：

window.onload = function(){
  scrollLeft();
 };
 function scrollLeft(){
 	var speed = 20;
   var tab = document.getElementById('demoin');
   var tab1 = document.getElementById('demo1');
   var tab2 = document.getElementById('demo2');
   tab2.innerHTML = tab1.innerHTML;

   function Marquee(){
     if(tab2.offsetWidth - tab.scrollLeft <=0) {    
       tab.scrollLeft = 0;
     }else{
       tab.scrollLeft ++;
     }
   }
   var timer = setInterval(Marquee,speed);
   tab.onmouseover = function(){
     clearInterval(timer);
   };
   tab.onmouseout = function(){
     timer = setInterval(Marquee,speed);
   }
 }

2、上下翻页切换效果
CSS代码：

*{
   	margin: 0;padding: 0;list-style: none;
   }
   .fl{
   	float: left;
   }

   .newsBox{
   	height: 30px;
   	line-height: 30px;
   	overflow: hidden;
   	margin:50px auto;
   	background: #ddd;
   }
   .newsList{
   	margin-top: 0;
   	/*transition:margin-top 1s;*/
	/*-webkit-transition:margin-top 1s;*/ /* Safari and Chrome */
   }
   .newsList li{
   	/*display: none;*/
   	/*float:left;*/
   	margin: 0 10px;
   	height: 30px;
   	line-height: 30px;
   }
   .newsList li:first-child{
   	/*display: block;*/
   }

HTML代码：

<div class="newsBox" id="newsBox">
	<ul id="newsList" class="newsList fl">
		<li class="newsLi">111111111</li>
		<li class="newsLi">222222222222</li>
		<li class="newsLi">3333333333333</li>
		<!-- <li class="newsLi">44444444444</li> -->
		<li class="newsLi">111111111</li>
	</ul>
</div>

js代码：

var timer, speed = 1500, iNum = 0;
var newsBox = document.getElementById('newsBox');
var newsList = document.getElementById('newsList');
var len = document.getElementsByClassName('newsLi').length-1;

function fn1 (){  //timer/next function
	iNum++;
	newsList.style.transition = 'margin-top 1s';
	if (iNum>len) {
		newsList.style.transition = '';
		newsList.style.marginTop = -30+'px';
		iNum = 0;
	}
	
	newsList.style.marginTop = -30*iNum+'px';
	
	return false;
}
function fn2 (){  //prev function
	iNum--;
	newsList.style.transition = 'margin-top 1s';
	if (iNum<0) {
		newsList.style.transition = '';
		newsList.style.marginTop = -120+'px';
		iNum = len;
	}
	newsList.style.marginTop = -30*iNum+'px';
	return false;
}
function setT(){  //set timer
	timer = setInterval(fn1,speed);
	return false;
}
function clearT(){  //clear timer
	clearInterval(timer);
	return false;
}
timer = setInterval(fn1,speed);

newsBox.onmouseover = clearT;
newsBox.onmouseout = setT;

3、直接切换效果
直接切换效果和刚才的翻页效果差不多，只是比较简洁。CSS代码和HTML代码可以用 效果2 的，请看js代码：
js代码：

var timer, speed = 1500, iNum = 0;
var newsBox = document.getElementById('newsBox');
var newsList = document.getElementById('newsList');
var len = document.getElementsByClassName('newsLi').length-1;

function fn1 (){  //timer/next function
	iNum++;
	if (iNum>len) {
		iNum = 0;
	}
	newsList.style.marginTop = -30*iNum+'px';
	return false;
}
function fn2 (){  //prev function
	iNum--;
	if (iNum<0) {
		iNum = len;
	}
	newsList.style.marginTop = -30*iNum+'px';
	return false;
}
function setT(){  //set timer
	timer = setInterval(fn1,speed);
	return false;
}
function clearT(){  //clear timer
	clearInterval(timer);
	return false;
}
timer = setInterval(fn1,speed);

newsBox.onmouseover = clearT;
newsBox.onmouseout = setT;

个人微信公众号：侦探小禾子，闲聊育儿生活星座塔罗牌，野生法考通过者免费法律咨询，欢迎关注！