用html写轮播图

最新推荐文章于 2023-09-30 13:24:43 发布

朝去夜来

最新推荐文章于 2023-09-30 13:24:43 发布

阅读量2.8w

点赞数 56

分类专栏： html 文章标签： css html html5

本文链接：https://blog.csdn.net/wenqi1/article/details/119973921

版权

html 专栏收录该内容

18 篇文章 16 订阅

订阅专栏

先放代码和效果图再讲解

<!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里

朝去夜来

关注

56
点赞
踩
443

收藏

觉得还不错? 一键收藏
27
评论
用html写轮播图

先放代码和效果图再讲解<!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:
复制链接

扫一扫