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

猿猿网页设计(yywyss365)

于 2023-05-07 08:02:54 发布

阅读量1.5k

点赞数

分类专栏： #js 文章标签：前端

本文链接：https://blog.csdn.net/u011955860/article/details/130538728

版权

#js 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1.页面效果图：

2.插入跑马灯图片div

	<h2>爱心志愿</h2>
		<div id="marquee-box" >
			
	<div id="marquee-con">
		<div id="marquee-1"></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>