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>