html部分
<div class="adBox">
<ul id="adcont">
<li class="adtitle">
广告1
</li>
<li class="adtitle">
广告2
</li>
<li class="adtitle">
广告3
</li>
<li class="adtitle">
广告4
</li>
</ul>
</div>
Css部分
.adBox{
width: 100%;
height: 40px;
margin-top: 10px;
padding-left: 20px;
background-color: #f6f6f6;
overflow: hidden;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.adtitle{
height: 40px;
width: 100%;
line-height: 40px;
float: left;
display: inline;
font-size: 16px;
color: #fa614d;
}
JS部分
<script>
let marginTop = 0;
let scroll = true;
//定时函数,每1S执行一次
setInterval(function (){
if(scroll)
{
$('#adcont li:first').animate(
{marginTop:marginTop--},
0,
function (){
if( -marginTop === $(this).height()+1)
{
let $f = $(this);
$(this).remove();
marginTop = 0;
$f.css("margin-top","0px");
$("ul").append($f);
}
}
);
}
},50);
$(function (){
$("ul").hover(function (){
scroll = false;
},function (){
scroll =true
});
})
</script>