原生js无缝滚动demo
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="referrer" content="origin-when-crossorigin" /> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>111</title> <style> * { margin: 0; padding: 0;} .clearfix { zoom: 1; } .clearfix:after { content: "."; width: 0; height: 0; visibility: hidden; display: block; clear: both; overflow:hidden; } .myscroll { width: 300px; height: 260px; margin: 0 auto; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: hidden;} .myscroll li {width:300px;height: 260px;flex-shrink: 0;} .myscroll a { color: #333; text-decoration: none;} .myscroll a:hover { color: #ED5565; text-decoration: underline;} ul{display: flex;flex-shrink: 0;} </style> </head> <body> <div class="myscroll"> <ul class='clearfix'> <li><a href="#">1111111111111111111111</a></li> <li><a href="#">2222222222222222</a></li> <li><a href="#">33333333333333333</a></li> <li><a href="#">444444444444444444444444444</a></li> <li><a href="#">4444444444444444444</a></li> <li><a href="#">555555555555555555555555</a></li> <li><a href="#">66666666666666666666666666</a></li> <li><a href="#">7777777777777777777777777</a></li> <li><a href="#">8888888888888888888888888888</a></li> <li><a href="#">9999999999999999999999999999999</a></li> <li><a href="#">aaaaaaaaaaaaaaaaaa</a></li> <li><a href="#">bbbbbbbbbbbbbbbbbbbbbb</a></li> <li><a href="#">bbbbbbbbbbbbbbbbbbbbbbbbb</a></li> <li><a href="#">ddddddddddddddddddd</a></li> <li><a href="#">eeeeeeeeeeeeeeeeeee</a></li> <li><a href="#">ffffffffffffffffffffffffff</a></li> </ul> </div> <div id="btn">点点</div> </body> <script> let timer=null; let scrollOuter = document.getElementsByClassName('myscroll')[0]; let oUl=scrollOuter.getElementsByTagName('ul')[0]; var li_width = document.getElementsByTagName("li")[0].clientWidth; oUl.style.width=document.getElementsByTagName("li").length * li_width + 'px'; console.log(li_width); move() function move(){ //console.log(scrollOuter.scrollLeft); if(timer){ clearTimeout(timer); timer=null; } scrollOuter.scrollLeft+=1; if(scrollOuter.scrollLeft>li_width){ console.log(scrollOuter.scrollLeft,li_width) scrollOuter.scrollLeft-=li_width; var currLi = document.getElementsByTagName("li")[0]; var curr = oUl.removeChild(currLi); //console.log(curr) //oUl.appendChild(curr) } timer=window.setTimeout(move,10); } /*document.getElementsByTagName("li").onmouseover=function(){ if(timer){ clearTimeout(timer); timer=null; } }*/ </script> </html>
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="referrer" content="origin-when-crossorigin" /> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>111</title> <style> * { margin: 0; padding: 0;} .myscroll { width: 300px; height: 260px; margin: 0 auto; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: hidden;} .myscroll li { height: 26px; margin-left: 25px;} .myscroll a { color: #333; text-decoration: none;} .myscroll a:hover { color: #ED5565; text-decoration: underline;} ul{display : block;margin-top:0;} </style> </head> <body> <video src="https://www.w3school.com.cn/i/movie.ogg" controls="controls" autoplay="autoplay" id="myVideo"> your browser does not support the video tag </video> <div class="myscroll"> <ul> <li><a href="#">1111111111111111111111</a></li> <li><a href="#">2222222222222222</a></li> <li><a href="#">33333333333333333</a></li> <li><a href="#">444444444444444444444444444</a></li> <li><a href="#">4444444444444444444</a></li> <li><a href="#">555555555555555555555555</a></li> <li><a href="#">66666666666666666666666666</a></li> <li><a href="#">7777777777777777777777777</a></li> <li><a href="#">8888888888888888888888888888</a></li> <li><a href="#">9999999999999999999999999999999</a></li> <li><a href="#">aaaaaaaaaaaaaaaaaa</a></li> <li><a href="#">bbbbbbbbbbbbbbbbbbbbbb</a></li> <li><a href="#">bbbbbbbbbbbbbbbbbbbbbbbbb</a></li> <li><a href="#">ddddddddddddddddddd</a></li> <li><a href="#">eeeeeeeeeeeeeeeeeee</a></li> <li><a href="#">ffffffffffffffffffffffffff</a></li> </ul> </div> <div id="btn">点点</div> </body> <script> let timer=null; let scrollOuter = document.getElementsByClassName('myscroll')[0]; let oUl=scrollOuter.getElementsByTagName('ul')[0]; var li_height = document.getElementsByTagName("li")[0].clientHeight; move() function move(){ if(timer){ clearTimeout(timer); timer=null; } scrollOuter.scrollTop+=1; if(scrollOuter.scrollTop>li_height){ var currLi = document.getElementsByTagName("li")[0]; var curr = oUl.removeChild(currLi); oUl.appendChild(curr) } /*if(timer){ clearTimeout(timer); timer=null; } let rangeVal = parseFloat(scrollOuter.scrollHeight) - parseFloat(scrollOuter.clientHeight); let noticeInner = scrollOuter.getElementsByTagName('li')[0]; console.log(scrollOuter.scrollTop,rangeVal) if(Math.abs(scrollOuter.scrollTop) < rangeVal){ scrollOuter.scrollTop+=1; }else{ scrollOuter.scrollTop=0; }*/ /* var noticeHTML=scrollOuter.innerHTML; let val1 = scrollOuter.scrollTop; scrollOuter.scrollTop+=1; let val2=scrollOuter.scrollTop; if(val1===val2){ scrollOuter.innerHTML+=noticeHTML; } */ timer=window.setTimeout(move,50); } /*document.getElementsByTagName("li").onmouseover=function(){ if(timer){ clearTimeout(timer); timer=null; } }*/ var aud = document.getElementById("myVideo"); aud.autoplay='autoplay'; //aud.onended = function() { // alert("音频播放完成"); //}; </script> </html>
//onMouseOver={this.clearTime}
//onMouseOut={this.move}
