js html css 圖片跑馬燈效果（輪播）

js html css 圖片跑馬燈效果（輪播）
js html css 實現圖片跑馬燈效果（輪播），效果圖如下：
代碼： html:

<div id="marquee-box" >
	<div id="marquee-con">
		<div id="marquee-1"></div>
		<div id="marquee" class="d-flex justify-content-between">
			<img src="" class="marquee-img"/>




			<img src="" class="marquee-img"/>
			<img src="" class="marquee-img"/>
			<img src="" class="marquee-img"/>
		</div>
	</div>
</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
}

javascript

<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>