今天的内容是使用锚点链接实现简单的轮播图效果。
(只需要代码可以直接跳到最后查看)
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>