今天的内容是使用锚点链接实现简单的轮播图效果。
（只需要代码可以直接跳到最后查看）
1.首先解释一下什么叫锚点链接
锚点链接：是网页制作中超级链接的一种，又称为命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接。可以实现在同一个页面内的快速跳转。
2.说明一下它简单的语法
（1）给元素定义命名锚记名
语法：<标记 id="命名锚记名"></标记>
（2）命名锚记连接
语法：<a href="#命名锚记名称"></a>
此时，如果点击a链接则会跳转到id=命名锚记名称的位置。
3.现在我们来看看怎么利用锚点链接来实现简单的轮播图效果吧！
（1）先来看看结果
点击1，2，3，4出现不同的图片，一个简单的轮播图效果。
（2）编写思路
a.引入你需要的图片，在项目下建一个img文件夹，把图片放入即可
b.写出大体框架，我们用一个div来放置图片，一个div来放置1,2,3,4按钮。再用一个容器div把它们装起来。然后把1,2,3,4以及图片放入相应的框中。
注意橘色边框包含的内容哦！
现在效果是这样的：
c.先来实现1,2,3,4的样式趴！
来看看现在的效果吧！
如果你现在点击1,2,3,4它会跳转到对应的图片去，但是不能实现轮播图的效果，我们需要做一些简单的改变才可以。
现在让我们来实现吧！
其实我们这里只需要把id="imglist"的overflow属性设置为hidden就可以啦，意思是隐藏超出容器的部分。这里顺便说一下overflow吧。
overflow属性：定义溢出元素内容区的内容会如何处理。
它的值：
visible：默认值，不会被修剪，会出现在元素框之外（就是第一张截图的那种效果）
hidden：内容被修剪，其余内容不可见（我们这里使用锚点链接使其可见）
scroll：内容会被修剪，浏览器显示滚动条，来查看其余部分的内容
auto：内容被修剪，如果有超出部分就显示滚动条，没有就不出现滚动条
inherit：规定应该从父元素继承overflow属性的值。
（可以用这个例子试一试，方便理解）
最后，完整代码
注意修改图片路径！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style>
/*去除自带的边距，方便之后的计算*/
*{
margin: 0;
padding: 0;
}
/*解决某些浏览器兼容性问题*/
img{
display: block;
width: 500px;height: 375px;
}
.nav{
width: 500px;height: 375px;
border: 1px solid black;
margin: 50px auto;
position: relative;
}
.nav .btn{
position: absolute;
right: 5px; bottom: 10px;
}
.nav .btn a{
float: left;
width: 30px; height: 30px;
margin-right: 5px;
background-color: rgb(0,0,0,.5);
color: white;
text-align: center;
line-height: 30px;
text-decoration: none;
}
.nav .btn a:hover{
background-color: rgb(0,0,0,1);
}
.imglist{
width: 500px;height: 375px;
overflow: hidden;
}
</style>
<body>
<div class="nav">
<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="imglist">
<img src="img/256.jpg" id="img1"/>
<img src="img/47.jpg" id="img2"/>
<img src="img/timg.jpg" id="img3"/>
<img src="img/touxiang.jpg" id="img4"/>
</div>
</div>
</body>
</html>
1018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
