案例图片的无缝轮播

最新推荐文章于 2024-09-21 15:07:21 发布

qq_38068491

最新推荐文章于 2024-09-21 15:07:21 发布

阅读量113

点赞数

本文链接：https://blog.youkuaiyun.com/qq_38068491/article/details/83057705

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<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:0px;
		}
		li{
			float:left;
			list-style:none;
		}
	</style>
	</head>
<body>
		<div id="box">
			<ul id="u">
				<li><img src="img/a.jpg" alt="" /></li>
				<li><img src="img/b.jpg" alt="" /></li>
				<li><img src="img/c.jpg" alt="" /></li>
				<li><img src="img/d.jpg" alt="" /></li>
				<li><img src="img/a.jpg" alt="" /></li>
				<li><img src="img/b.jpg" alt="" /></li>
			</ul>
		</div>
	</body>
</html>
<script src="public.js"></script>
<script type="text/javascript">
var ul=document.getElementById("u");
var div=document.getElementById("box");


var timer=setInterval(autoplay,20);
function autoplay(){
	ul.style.left=ul.offsetLeft-10+"px";
	if(ul.offsetLeft<-1200){
		ul.style.left=0;
	}
}
box.onmouseover=function(){
	clearInterval(timer);
}
box.onmouseout=function(){
	timer=setInterval(autoplay,20);
}
</script>