html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/index.css">
<title>无缝轮播</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.text-banner{
width: 100%;
height: 30px;
overflow: hidden;
outline: 1px solid #ddd;
}
.text-banner2{
width: 100%;
overflow: hidden;
outline: 1px solid #ddd;
}
.text-banner-ul-1,.text-banner-ul-2{
list-style: none;
width: 100%;
position: relative;
top: 0;
}
.text-banner-ul-1 li,.text-banner-ul-2 li{
height: 30px;
line-height: 30px;
}
.text-banner-hx{
white-space: nowrap;
}
.text-banner-hx div{
display: inline-block;
left: 0;
position: relative;
}
/* 上传文件 */
.file-box{
margin: 20px;
}
.file-box .upload-btn{
width: 100px;
height: 35px;
line-height: 35px;
font-size: 14px;
color: #fff;
border-radius: 4px;
transition: all .3s;
background: #409eff;
text-align: center;
cursor: pointer;
position: relative;
overflow: hidden;
}
.file-box .upload-btn .file{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
cursor: pointer;
}
.file-box .upload-btn:hover{
background: #66b1ff;
}
</style>
<body>
<div class="text-banner">
<ul class="text-banner-ul-1">
<li>文字轮播1</li>
<li>文字轮播2</li>
<li>文字轮播3</li>
<li>文字轮播4</li>
<li>文字轮播5</li>
</ul>
<ul class="text-banner-ul-2">
<li>文字轮播1</li>
<li>文字轮播2</li>
<li>文字轮播3</li>
<li>文字轮播4</li>
<li>文字轮播5</li>
</ul>
</div>
<div class="text-banner2">
<div class="text-banner-hx">
<div class="text-banner-hx-1"><span style="padding: 8px 0; display: inline-block;">文字轮播1文字轮播1文字轮播1文字轮播1</span></div><div class="text-banner-hx-2"><span style="padding: 8px 0; display: inline-block;">文字轮播1文字轮播1文字轮播1文字轮播1</span></div>
</div>
</div>
<div class="file-box">
<div class="upload-btn">
点击上传
<input type="file" name="file" id="file" class="file" />
</div>
</div>
<script>
function timer(){
let li = document.getElementsByClassName("text-banner-ul-1");
let li2 = document.getElementsByClassName("text-banner-ul-2");
let length = li[0].children.length;
let offsetHeight = li[0].children[0].offsetHeight;
let num = offsetHeight * length;
let a = 5;
li[0].style.cssText = 'transition:all linear '+a+'s; top:-'+num+'px';
li2[0].style.cssText = 'transition:all linear '+a*2+'s; top:-'+num*2+'px';
setTimeout(() => {
li[0].style.cssText = 'top:0px';
li2[0].style.cssText = 'top:0px';
timer();
}, 5000);
}
function timer2(){
let windowWidth = window.innerWidth;
let div1 = document.getElementsByClassName("text-banner-hx-1");
let div2 = document.getElementsByClassName("text-banner-hx-2");
let offsetWidth = div1[0].offsetWidth;
let a = 5;
if(offsetWidth<=windowWidth){
div1[0].style.cssText = 'width:100%;'
div2[0].style.cssText = 'width:100%;'
let offsetWidth2 = div1[0].offsetWidth;
div1[0].style.cssText = 'width:100%; transition:all linear '+a+'s; left:-'+offsetWidth2+'px';
div2[0].style.cssText = 'width:100%; transition:all linear '+a*2+'s; left:-'+offsetWidth2*2+'px';
setTimeout(() => {
div1[0].style.cssText = 'left:0px';
div2[0].style.cssText = 'left:0px';
timer2();
}, 5000);
}else{
offsetWidth = div1[0].offsetWidth+40;
div1[0].style.cssText = 'margin-right:40px; transition:all linear '+a+'s; left:-'+offsetWidth+'px';
div2[0].style.cssText = 'margin-right:40px; transition:all linear '+a*2+'s; left:-'+offsetWidth*2+'px';
setTimeout(() => {
div1[0].style.cssText = 'left:0px';
div2[0].style.cssText = 'left:0px';
timer2();
}, 5000);
}
}
timer();
timer2();
</script>
</body>
</html>