原生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; 

个人微信公众号:侦探小禾子,闲聊育儿生活星座塔罗牌,野生法考通过者免费法律咨询,欢迎关注!
这里写图片描述

原文链接:https://blog.csdn.net/JaneLittle/article/details/80094902?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277607816782248539109%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277607816782248539109&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-29-80094902-null-null.nonecase&utm_term=%E6%96%B0%E9%97%BB

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片