Js实现图片无缝滚动

最新推荐文章于 2024-09-24 15:19:32 发布

大源阿良

最新推荐文章于 2024-09-24 15:19:32 发布

阅读量924

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Shirongliang/article/details/123010136

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				white-space: nowrap;
				display: inline-block
			}
		</style>
	</head>
	<body>
		<div id="box" style="overflow:hidden; border:1px solid; padding:0px; width:300px; height:98px">
			<img src="img-1.jpg" >
			<img src="img-1.jpg" >
			<img src="img-1.jpg" >
			<img src="img-1.jpg" >
			
			
		</div>
	</body>
	<script type="text/javascript">
		// 初始化无缝滚动
		function initScroll(){
		    var boxDom = document.getElementById("box");
		    var ulDom = boxDom.firstElementChild;
		    var ulDom1 = ulDom.cloneNode();
		    ulDom1.innerHTML = ulDom.innerHTML;
			
		    boxDom.append(ulDom1);
		}
		// 调用初始化函数
		initScroll();
		// 滚动的内容
		// 准备一个实例，用来保存计时器对象
		var timeInstance = undefined;
		var step = 3;
		function doScroll(){
		   var boxDom = document.getElementById('box')
		   var left = boxDom.scrollLeft
		   boxDom.scrollLeft = left + step
		   if(boxDom.scrollLeft >= 100)
		   {
			   boxDom.scrollLeft = 0
		   }
		   timeInstance = setTimeout(doScroll,5)
		}
		doScroll();
		document.getElementById('box').onmouseover = function (){
			clearTimeout(timeInstance)
		}
		document.getElementById('box').onmouseleave = function (){
			doScroll()
		}
		
	</script>
</html>