huanggr
前端除了使用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属性，进而实现了点击切换的简单的轮播效果，大家有木有觉得很巧妙呢，欢迎大家留言评论
7