js图片滚动无缝衔接

最新推荐文章于 2024-06-25 11:18:39 发布

dingdang_666888

最新推荐文章于 2024-06-25 11:18:39 发布

阅读量933

点赞数

文章标签：轮播图无缝衔接滚动 js

本文链接：https://blog.csdn.net/lixiaoyan_star/article/details/85700158

版权

js图片滚动无缝衔接

<style>
		*{
			margin:0;
			padding:0;
		}
		div{
			width:600px;
			height:200px;
			position:relative;
			border:1px solid red;
			margin:100px;
			overflow:hidden;
		}
		ul{
			width:600%;
			position:absolute;
			left:0;
		}
		li{
			float:left;
			list-style:none;
		}
	</style>
	<body>
		<div id="box">
			<ul id="u">
				<li><img src="a.jpg" alt="" /></li>
				<li><img src="b.jpg" alt="" /></li>
				<li><img src="c.jpg" alt="" /></li>
				<li><img src="d.jpg" alt="" /></li>
				<li><img src="a.jpg" alt="" /></li>
				<li><img src="b.jpg" alt="" /></li>
			</ul>
		</div>
	</body>
</html>
<script>
	var num = 0; // 默认ul位置
	var oUl = document.getElementById("u");
	var box = document.getElementById("box");

	function autoPlay(){
		oUl.style.left=num+"px";
		num-=2;
		if(num<=-1200){
			num=0
		}
	}
	var timer=setInterval(autoPlay,100);
	box.onmouseover=function(){
		clearInterval(timer);
	}
	box.onmouseout=function(){
		timer=setInterval(autoPlay,100);
	}
</script>