html css js图片无缝衔接跑马灯效果

	&lt;h2&gt;爱心志愿&lt;/h2&gt;
		&lt;div id="marquee-box" &gt;
			
	&lt;div id="marquee-con"&gt;
		<div id="marquee-1"&gt;</div>
		
		<div id="marquee" class="d-flex justify-content-between">
			<img src="images/img01.jpg" class="marquee-img"/>
			<img src="images/img02.jpg" class="marquee-img"/>
			<img src="images/img04.jpg" class="marquee-img"/>
			<img src="images/img03.jpg" class="marquee-img"/>
		</div>
	</div>
</div>

3.为跑马灯div 设置 css 样式

#marquee-box{
	width:100%;
	overflow: hidden;
	height:232px
}
#marquee-con{
	width:500%;
	float:left;
}
#marquee,#marquee-1{
	float:left;
}
.marquee-img{
	float:left;
	height:232px;
	width: 186px;
	margin-left:16px
}

4.创建图片滚动 js 代码

<script type="text/javascript">
window.onload = function () {
  var marqueeBox = document.getElementById("marquee-box");
  var marquee = document.getElementById("marquee");
  var marqueeCopy = document.getElementById("marquee-1");

  marqueeCopy.innerHTML = marquee.innerHTML; 
  function fun() {
   //从右向左
    if (marqueeBox.scrollLeft >= 800) {
      marqueeBox.scrollLeft = 0;
    } else {
      marqueeBox.scrollLeft++;
    }
    //从左向右
    // if (marqueeBox.scrollLeft >= 0) {
    //   marqueeBox.scrollLeft = 800;
    // } else {
    //   marqueeBox.scrollLeft -- ;
    // }
  }

  var fun1 = setInterval(fun, 50);

  marqueeBox.onmouseover = function () {
    //鼠标经过时  清除定时器  停止图片的滚动
    clearInterval(fun1);
  };
  marqueeBox.onmouseout = function () {
    //鼠标离开后  继续滚动图片
    fun1 = setInterval(fun, 50);
  };
};
</script>