原生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--1a>li>
                <li class="fl"><a href="#">2--SV Pittie Shoar Textiles --2a>li>
                <li class="fl"><a href="#">3--SVP Global Venturest--3a>li>
                <li class="fl"><a href="#">4-- Pittie Shoar Textiles Contton Plant--4a>li>
                <li class="fl"><a href="#">5--SVP Global Ventures - SV Pittie Shoar Textiles Contton Plant--5a>li>
                <li class="fl"><a href="#">6--SVP Global Ventures - SV Pittie Shoar Textiles Contton Plant--6a>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">111111111li>
        <li class="newsLi">222222222222li>
        <li class="newsLi">3333333333333li>
        
        <li class="newsLi">111111111li>
    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;

个人微信公众号：小禾子的魔法盒子，欢迎关注！轻幽默、罕见闻的推送~
以下是微信公众号二维码：