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>