<!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}