<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
</head>
<body>
<style>
*{
margin:0px;
padding:0px;
}
html{
font-size: 50px;
}
.livebroadcast{
width: 7.02rem;
padding:0.3rem 0.16rem;
margin:0.2rem auto 0;
}
.infoRight{
font-family: 'PingFangSC-Regular';
font-size: 0.24rem;
color: #EE2532;
letter-spacing: 0;
text-align: right;
line-height: 0.24rem;
}
.broadcastList{
display: flex;
justify-content: space-between;
}
.broadcastList .mianLive{
display: flex;
align-items: center;
align-content:center;
width:3.48rem;
min-width:3.48rem;
height: 1.48rem;
background:rgba(238,37,50,0.05);
border-radius: 0.74rem;
border-radius: 0.74rem;
}
.mainLeftImg{ margin-left:0.16rem;}
.mainLeftImg img{ width:1.1rem; }
.wrapSecondLive{
min-width: 3.3rem;
width:3.3rem;
overflow: hidden;
}
.secondLive {
overflow: hidden;
}
.secondLive ul{
position: relative;
display: inline-block;
white-space: nowrap;
}
.secondLive li{
font-size: 0.2rem;
text-align: center;
display: inline-block;
width:1.1rem;
}
.headImg{
width:1rem;
margin: 0 auto;
display: block;
}
.otherli{
transition: all 2s ;
}
.liFirstChild{
transition: all 1.9s ;
opacity: 0;
}
</style>
<div class="livebroadcast">
<div class="broadcastList">
<div class="mianLive">
<div class="mainLeftImg">
</div>
</div>
<div class="wrapSecondLive" >
<div class="secondLive">
<ul id="newLivebroadcast"><li>
<img class="headImg" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1450417334,2188864891&fm=11&gp=0.jpg">
<p>111</p>
</li><li>
<img class="headImg" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1450417334,2188864891&fm=11&gp=0.jpg">
<p>222</p>
</li><li>
<img class="headImg" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1450417334,2188864891&fm=11&gp=0.jpg">
<p>333</p>
</li><li>
<img class="headImg" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1450417334,2188864891&fm=11&gp=0.jpg">
<p>444</p>
</li><li>
<img class="headImg" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1450417334,2188864891&fm=11&gp=0.jpg">
<p>555</p>
</li><li>
<img class="headImg" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1450417334,2188864891&fm=11&gp=0.jpg">
<p>666</p>
</li></ul>
</div>
</div>
</div>
</div>
<script>
moveFun()
function moveFun(){
let liCount = 1;
const ulEle = document.querySelector("#newLivebroadcast");
const liEle = document.getElementsByTagName("li");
let ulWidth = ulEle.offsetWidth;
let liWidth = liEle[0].offsetWidth
if(liEle.length<=3){
return
}
setInterval(()=>{
const liEleTemp = document.getElementsByTagName("li");
const firstEle = liEleTemp[0]
liEleTemp[0].classList.add('liFirstChild')
for(let i = 1;i<liEleTemp.length;i++){
liEle[i].classList.add('otherli')
liEle[i].style.transform = `translate3d(${-liWidth*liCount}px,0,0)`
}
setTimeout(()=>{
const transValue= document.defaultView.getComputedStyle(liEleTemp[1], null).transform.substring(7).split(',')[4]
if(Math.abs(transValue)===liWidth){
ulEle.removeChild(firstEle)
ulEle.appendChild(firstEle)
firstEle.classList.remove('liFirstChild')
}
for(let i = 0;i<liEleTemp.length;i++){
liEle[i].classList.remove('otherli')
liEle[i].style.transform = `translate3d(${0}px,0,0)`
}
},2100)
},2500)
}
</script>
</body>
</html>
