javescript实现图片无缝滚动的网页效果

效果展示：
HTML代码：

<!-- 放两个按钮用来控制滚动的方向 -->
		<input type="button" value="向左走">
		<input type="button" value="向右走">
		<!-- 一个大的div中含有一个无序列表，并且无序列表中有四个列表项，列表项中的图片自定义。 -->
		<div id="div1">
			<ul>
				<li><img src="img/photo01.jpeg" ></li>
				<li><img src="img/photo02.jpg" ></li>
				<li><img src="img/photo03.jpg" ></li>
				<li><img src="img/photo04.jpg" ></li>
			</ul>
		</div>

CSS代码：

*{
   
	/* 清楚浏览器的默认样式 */
	margin: 0;
	padding: 0;
}
#div1{
   
	width: 800px;
	height: 100px;
	margin: 100px auto;
	/* 设置无序列表的父元素为相对定位 */
	position: relative;
	/* 隐藏无序列表中多处的内容 */
	overflow: hidden;