缓慢平移轮播

最新推荐文章于 2021-06-18 23:15:08 发布

笔临

最新推荐文章于 2021-06-18 23:15:08 发布

阅读量365

点赞数

本文链接：https://blog.csdn.net/panhuanqin/article/details/81380803

版权




<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

	.box{
		position: absolute;
		top:200px;
		left: 300px;
		width: 600px;
		height: 80px;
		border: 5px solid;
		overflow: hidden;
	}
	.box>div{
		width: 1050px;
		height: 80px;
		background-color: red;
		display: flex;
	}
	img{
		width: 200px;
		height: 80px;
	}
	img:hover{
		transform:scale(1.2);
	}
	</style>
</head>
<body>
	<div class="box">
		<div>
			<img src="img/1.jpg" alt="">
			<img src="img/2.jpg" alt="">
			<img src="img/3.jpg" alt="">
			<img src="img/4.jpg" alt="">
			<img src="img/5.jpg" alt="">
		</div>
	</div>
	<script>
		var odiv=document.getElementsByClassName("box")[0];
		var odiv2=odiv.getElementsByTagName("div")[0];
		var oimg=document.getElementsByTagName("img");
		odiv2.style.marginLeft="0px";
		var rua=setInterval(function(){
            odiv2.style.marginLeft=parseInt(odiv2.style.marginLeft)-1+"px";
            if (-parseInt(odiv2.style.marginLeft)==200) {
            	odiv2.style.marginLeft="0px";
            	odiv2.appendChild(oimg[0])
            }
		},10)
		odiv2.οnmοuseοver=function(){
			clearInterval(rua)
		}
		odiv2.οnmοuseοut=function(){
		 rua=setInterval(function(){
            odiv2.style.marginLeft=parseInt(odiv2.style.marginLeft)-1+"px";
            if (-parseInt(odiv2.style.marginLeft)==200) {
            	odiv2.style.marginLeft="0px";
            	odiv2.appendChild(oimg[0])
            }
		},10)
		}
	</script>
</body>
</html>

笔临

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
缓慢平移轮播

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box{ position: absolute; to
复制链接

扫一扫