前端除了使用Css3和js等技术来实现轮播图,其实还可以通过hash来实现点击效果的展示,接下来我们就来一探究竟:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过哈希制作实现轮播效果_hash</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<style type="text/css">
* {
margin: 0;padding: 0;
}
#box {
width: 400px;
height: 400px;
margin: 50px auto;
position: relative;
}
.pic {
height: 100%;
}
.pic img {
position: absolute;
width: 100%;
height: 100%;
left: 0;top: 0;
opacity: 0;
}
.btn {
position: absolute;
left: 50%;
bottom: 10px;
margin-left: -100px;
width: 200px;
padding: 5px 0;
background: rgba(0,0,0,.5);
/*border-radius: 50%;*/
}
.btn a {
width: 10px;
height: 10px;
float: left;
background: #fff;
margin: 0 20px;
border-radius: 50%;
}
.pic img:first-child {
opacity: 1;
}
.pic img:target {
opacity: 1;
}
</style>
</head>
<body>
<div id="box">
<div class="pic">
<img src="img/1.jpg" alt="" id="img1">
<img src="img/2.jpg" alt="" id="img2">
<img src="img/3.jpg" alt="" id="img3">
<img src="img/4.jpg" alt="" id="img4">
</div>
<div class="btn">
<a href="#img1"></a>
<a href="#img2"></a>
<a href="#img3"></a>
<a href="#img4"></a>
</div>
</div>
</body>
</html> |
当我们点击的时候,我们会发现浏览器地址栏就会有一个#号的表示,这个就代码哈希,在通过target,就可以激活opacity属性,进而实现了点击切换的简单的轮播效果,大家有木有觉得很巧妙呢,欢迎大家留言评论
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"通过哈希制作实现轮播效果_hash"
最新评论