css利用锚点制作轮播图

最新推荐文章于 2023-04-06 20:31:33 发布

牧屿秭归

最新推荐文章于 2023-04-06 20:31:33 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/Zero_ying/article/details/95229072

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

页面运行效果如图所示，有编号为1、2、3、4共四张图片，当鼠标点击对应的图片编号时，可以跳转到对应编号的图片。

界面代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
* {
margin 0;
	padding: 0;
}
img {
	display: block;
}
.box {
	width: 500px;
	height: 400px;
	border: 1px #000 solid;
	margin: 0 auto;
	position: relative;
}
.btn {
	position: absolute;
	right: 5px;
	bottom: 10px;
}
.btn a {
	float: left;
	width: 30px;
	height: 30px;
	background: rgba(0,0,0,.5);
	text-align: center;
	line-height: 30px;
	color: #fff;
	text-decoration: none;
	margin-right: 10px;
}
.btn a:hover {
	background: rgba(0,0,0,1);
}
.list {
	width: 500px;
	height: 400px;
	overflow: hidden;
}
</style>
</head>

<body>
<div class="box">
  <div class="btn"> 
     <a href="#img1">1</a>
     <a href="#img2">2</a>
     <a href="#img3">3</a>
     <a href="#img4">4</a> 
  </div>
  <div class="list"> 
   <img src="images/1.jpg" width="500" height="400" id="img1"/>
   <img src="images/2.jpg" width="500" height="400" id="img2"/> 
   <img src="images/3.jpg" width="500" height="400" id="img3"/> 
   <img src="images/4.jpg" width="500" height="400" id="img4"/>
   </div>
</div>
</body>
</html>