用html写轮播图

先放代码和效果图再讲解<!doctype html><html><head lang="en"><meta charset="utf-8"><title>轮播图</title><style>#pp2{width:9999px;height:9999px;animation:switch 15s infinite;}

朝去夜来

28402人浏览 · 2021-08-28 22:29:54

朝去夜来 · 2021-08-28 22:29:54 发布

先放代码和效果图再讲解

<!doctype html>
<html>
<head lang="en">
    <meta charset="utf-8">
	<title>轮播图</title>
	<style>
	    #pp2{
		width:9999px;
		height:9999px;
		animation:switch 15s infinite;
		}
		#pp2>img{
		float:left;
		}
		#pp1{
		width:820px;
		height:340px;
		overflow:hidden;
		}
		@keyframes switch{
		0%{};
		20%{transform:translateX(0px);}
		40%{transform:translateX(-820px);}
		60%{transform:translateX(-1640px);}
		80%{transform:translateX(-2460px);}
		100%{transform:translateX(-3280px);}
		}
		
	</style>
</head>
    <body>
	    <div id="pp1">
		    <div id="pp2">
			     <img src="images/1.jpg"/>
			     <img src="images/2.jpg"/>
			     <img src="images/3.jpg"/>
			     <img src="images/4.jpg"/>
			     <img src="images/5.jpg"/>
			</div>
	    </div>
    </body>
</html>

为了缩小图片内存，效果图有抽帧，就比较卡，实际效果不卡

        #pp2{
		width:9999px;
		height:9999px;
		animation:switch 15s infinite;
		}

这个宽高那么大，其实就是尽量设大一点，设成其他数值也可以，animation:switch 15s infinite表示这个gif时间一共是15秒

        #pp2>img{
		float:left;
		}

这是表示图片在左边

		#pp1{
		width:820px;
		height:340px;
		overflow:hidden;
		}

这宽高就是跟着图片的大小来写，overflow:hidden表示只显示一张图片在上面

		@keyframes switch{
		0%{};
		20%{transform:translateX(0px);}
		40%{transform:translateX(-820px);}
		60%{transform:translateX(-1640px);}
		80%{transform:translateX(-2460px);}
		100%{transform:translateX(-3280px);}
		}

没有设置时间的时候，五张图片其实是平铺在网页上的

这个对图片进行如何显示进行设置，我们一共有5张图片，假设时间一共是100%，分成五份，所以0%，20%等就是这么来的。

因为第一张就在最上面，所以我们0%不用设置任何东西，20%在0px就可以了。20%-40%时是第二张图片，所以我们的第一张图片就要往左移820px，以此类推。translateX是图片横向轮播，translateY是竖向轮播。

	    <div id="pp1">
		    <div id="pp2">
			     <img src="images/1.jpg"/>
			     <img src="images/2.jpg"/>
			     <img src="images/3.jpg"/>
			     <img src="images/4.jpg"/>
			     <img src="images/5.jpg"/>
			</div>
	    </div>

就是那5张图片放进div里