如果有问题或者更好的方法，欢迎留言
效果图如下：
具体代码见下面：
<!DOCTYPE>
<html>
<head>
<title>06</title>
<meta charset="utf-8">
<script>
window.onload = function () {
var ul = document.getElementById("ul");
var ul1 = document.getElementById("ul1");
var pic = ul.getElementsByTagName("div");
var pic1 = ul1.getElementsByTagName("div");
var name = ['智能摄像头','智能门锁','智能抄表','智能路灯','智能消防','智能停车','智能井盖','智能烟感','智慧农业','智能家居'];
for (var i=0;i<pic.length;i++){
pic[i].style.background="url('./simid/"+name[i]+".png')";
pic1[i].style.background="url('./simid/"+name[i]+".png')"
};
setInterval(move, 1000);
function move() {
ul.style.left=ul.offsetLeft-50+"px";
ul1.style.left=ul1.offsetLeft-50+"px";
if(ul.offsetLeft<=-600){ul.style.left=600+"px";}
if(ul1.offsetLeft<=-600){ul1.style.left=600+"px";}
}
}
</script>
<style>
html,body{
margin:0
}
.animation{
overflow:hidden;
width: 400px;
position: relative;
top:50px;
height:220px;
display: flex;
}
#ul{
flex-shrink: 0;
position:absolute;
width: 600px;
height:220px;
display: flex;
}
#ul1{
flex-shrink: 0;
position:absolute;
left: 600px;
width: 600px;
height:220px;
display: flex;
}
#ul div,#ul1 div{flex-shrink: 0; width: 100px; text-align:center; line-height:220px; font-size: 24px; color: #FFFFFF;}
</style>
</head>
<body>
<div class="animation">
<div id="ul">
<div>智能摄像头</div>
<div>智能门锁</div>
<div>智能抄表</div>
<div>智能路灯</div>
<div>智能消防</div>
<div>智能停车</div>
</div>
<div id="ul1">
<div>智能摄像头</div>
<div>智能门锁</div>
<div>智能抄表</div>
<div>智能路灯</div>
<div>智能消防</div>
<div>智能停车</div>
</div>
</div>
</body>
</html>