整体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;
padding: 0;}
#box {
width: 100%;
height: 502px;
overflow: hidden;/*溢出的部分:隐藏*/
}
#box .menu {
width: 607%;
position: relative;
margin-left: -40px;/*左外边距*/
bottom: 0px;/*低边距离*/
}
#box .menu ul li {
float: left;/*浮动:左,就是要把图片往左浮动*/
list-style: none;
}
</style>
</head>
<body>
<div id="box"><!--最外的大盒子-->
<div class="menu"><!--这里是写入我们要播放的图片-->
<ul><!--无序列表-->
<li><img src="image/01.jpg" width="1546px;" height="500px"></li>
<li><img src="image/02.jpg" width="1546px;" height="500px"></li>
<li><img src="image/03.jpg" width="1546px;" height="500px"></li>
<li><img src="image/04.jpg" width="1546px;" height="500px"></li>
<li><img src="image/05.jpg" width="1546px;" height="500px"></li>
<li><img src="image/06.jpg" width="1546px;" height="500px"></li>
</ul>
</div>
</div>
<!--在这里导入javascript文件也就是js代码，如果没有这个就没有动画-->
<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
<!--写代码-->
<script>
// function就是函数执行
$(function(){
//一般获取元素用var,从第一张图片开始
var _index=0,
// 窗口宽度,就是把所有图片放在水平线上的总宽度
window_width=1546,
//时间循环
timer=null,
//图片内容一共六张
images_count=6;
//获取下一个
function nextPlay(){
if(_index>images_count-1){//_index指的是每一张图片
_index=0;//从第一张开始
//stop() 停留，animate自定义动画往左运动，
$("#box .menu").stop().animate({left:-window_width*_index},500);
}else{
$("#box .menu").stop().animate({left:-window_width*_index},500);
}
//每一个图片加一就是自动按顺序出来
_index++;
}
timer=setInterval(nextPlay,2000);
})
</script>
</body>
</html>javascript文件也就是js文件：链接：https://pan.baidu.com/s/1_RUihF6SdA4-NJcqHGqm1g
提取码：mnfg