HTML轮播

最新推荐文章于 2024-09-11 23:16:45 发布

程序ape老李

最新推荐文章于 2024-09-11 23:16:45 发布

阅读量329

点赞数 1

CC 4.0 BY-SA版权

分类专栏：网页设计

本文链接：https://blog.youkuaiyun.com/qq_42673921/article/details/89339717

网页设计专栏收录该内容

4 篇文章

订阅专栏

五个图片的轮播：

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		@keyframes sums{20%{margin-left:-550px;}40%{margin-left:-1100px;}60%{margin-left:-1650px;}80%{margin-left:-2200px;}100%{margin-left:0px;}}
		#photo img{width: 550px;height: 400px;}
		#photo{width: calc(550px*5);margin-top: -20px;animation: sums 5s infinite;}
		li{text-align:center; display: inline-block; width: 100px;height: 25px; background-color: yellow; position:relative;top: -420px;margin:0px 220px;padding: 0px;}
		#photos{width: 550px;height: 400px;border: 1px red solid;border-radius: 15px; overflow: hidden;margin: 100px auto;}
		.sum{position: relative;width: 60px;height: 60px;top: 350px;left:280px;text-align:inline-center;background-color: yellow;margin:0px 9px;border-radius: 30px;}
		#photos .sum:hover{ background-color: #999;cursor: pointer;}
		#photos .sum:hover~#photo,#photo:hover { animation-play-state:paused;}
		@keyframes s1{0%.19%{margin-left:0px;}}
		@keyframes s2{20%.39%{margin-left:-550px;}}
		@keyframes s3{40%.59%{margin-left:-1100px;}}
		@keyframes s4{60%.79%{margin-left:-1650px;}}
		@keyframes s5{80%.100%{margin-left:-2200px;}}
		#sum1:hover~#photo{ animation:s1 0.5s;}
		#sum2:hover~#photo{ animation:s2 0.5s;}
		#sum3:hover~#photo{ animation:s3 0.5s;}
		#sum4:hover~#photo{ animation:s4 0.5s;}
		#sum5:hover~#photo{ animation:s5 0.5s;}
	</style>
</head>
<body>
	<div id="photos">
	<span class="sum" id="sum1">1</span>
	<span class="sum" id="sum2">2</span>
	<span class="sum" id="sum3">3</span>
	<span class="sum" id="sum4">4</span>
	<span class="sum" id="sum5">5</span>
		<div id="photo">
			<img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg"><img src="5.jpg">
			<ul id="info">
				<li>图片1制作</li><li>图片2制作</li><li>图片3制作</li><li>图片4制作</li><li>图片5制作</li>
			</ul>
		</div>
	</div>
	
</body>
</html>