css部分
.notice_bg{width: 100%;height: 30px;background: #041C3B;}
.notice_bg .left_img{margin:0 15px;display: none;}
.notice_bg li{color: #fff;height: 30px;line-height: 30px;}
.notice_bg li a{color: #fff;font-size: 13px;}
.notice_bg .notice_list{overflow: hidden;display: flex;}
#wrapper{height: 30px;width: 1200px;margin: 0 auto;position: relative;}
#wrapper .over{width: 1200px;height: 30px;overflow: hidden;position: relative;}
#wrapper ul {position: absolute;left: 0;top: 0;}
#wrapper li{text-align: center;float: left; width: auto;margin-right: 40px;list-style: none;}
h5部分
<div class="notice_bg" >
<div class="notice_list" id="wrapper">
<div class="left_img">
<img style="width: 20px;" src="https://staticresource.liuxue315.cn/images/jlzt_notice.png">
</div>
<div class="over">
<ul>
<li><a href="" target="_blank">今晚八点丨上海蒙特奥利弗学校创校校长 Michael Yang谈:国际高中教育如何助力学生终生可持续发展?</a></li>
<li><a href="" target="_blank">今就点丨北京蒙特奥利弗学校创校校长 Michael Yang谈:国际高中教育如何助力学生终生可持续发展?</a></li>
</ul>
</div>
</div>
</div>
js部分
var timer=null;
var speed=-2;
var od=document.getElementById("wrapper");
var au=od.getElementsByTagName('ul')[0];
var ali=au.getElementsByTagName('li');
au.innerHTML=au.innerHTML+au.innerHTML;
au.style.width=(ali[0].offsetWidth+40)*ali.length+'px';
timer=setInterval(move,100)
function move(){
console.log(123);
if(au.offsetLeft<-au.offsetWidth/2){
au.style.left='0';
}
if(au.offsetLeft>0){
au.style.left=-au.offsetWidth/2+'px';
}
au.style.left=au.offsetLeft+speed+'px';
}
od.οnmοuseοver=function(){
clearInterval(timer);
}
od.οnmοuseοut=function(){
timer=setInterval(move,100)
}
网友评论