HTML/CSS 锚点轮播图 爱被打了一巴掌 2023-01-01 15:51 215阅读 0赞 ### HTML/CSS 锚点轮播图 ### 方法一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wrapper { width: 500px; height: 400px; /* border: 1px solid red; */ text-align: center; margin: 100px auto; } .big-pho { width: 500px; height: 100%; overflow: hidden; } .big-pho img { width: 500px; height: 100%; } .small-pho img { width: 90px; height: 70px; margin: 10px 3px; } </style> </head> <body> <div class="wrapper"> <div class="big-pho"> <a name="a1"><img src="./img/kof-01.jpg" alt=""></a> <a name="a2"><img src="./img/kof-02.jpg" alt=""></a> <a name="a3"><img src="./img/kof-03.jpg" alt=""></a> <a name="a4"><img src="./img/kof-04.jpg" alt=""></a> <a name="a5"><img src="./img/kof-05.jpg" alt=""></a> </div> <div class="small-pho"> <a href="#a1"><img src="./img/kof-01.jpg" alt=""></a> <a href="#a2"><img src="./img/kof-02.jpg" alt=""></a> <a href="#a3"><img src="./img/kof-03.jpg" alt=""></a> <a href="#a4"><img src="./img/kof-04.jpg" alt=""></a> <a href="#a5"><img src="./img/kof-05.jpg" alt=""></a> </div> </div> </body> </html> 方法二： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 500px; height: 400px; margin: 100px auto; } .big-pho { position: relative; width: 500px; height: 400px; /* border: 1px solid red; */ } .big-pho a{ position: absolute; width:100%; height:100%; } .big-pho img { width: 100%; height: 100%; } .small-pho img { width: 90px; height: 70px; margin: 10px 3px; } /* .small-pho a:first-of-type { z-index: 2; } */ .big-pho a:target { /* 这个z-index只要不为0和负数，其他正数都行 */ z-index: 100; } </style> </head> <body> <div class="container"> <div class="big-pho"> <!-- 这里可以用a包住img,也可以用其他的元素 --> <a name="a1"><img src="./img/kof-01.jpg" alt=""></a> <a name="a2"><img src="./img/kof-02.jpg" alt=""></a> <a name="a3"><img src="./img/kof-03.jpg" alt=""></a> <a name="a4"><img src="./img/kof-04.jpg" alt=""></a> <a name="a5"><img src="./img/kof-05.jpg" alt=""></a> </div> <div class="small-pho"> <a href="#a1"><img src="./img/kof-01.jpg" alt=""></a> <a href="#a2"><img src="./img/kof-02.jpg" alt=""></a> <a href="#a3"><img src="./img/kof-03.jpg" alt=""></a> <a href="#a4"><img src="./img/kof-04.jpg" alt=""></a> <a href="#a5"><img src="./img/kof-05.jpg" alt=""></a> </div> </div> </body> </html> 显示： ![在这里插入图片描述][20210103193733210.gif_pic_left] [20210103193733210.gif_pic_left]: /images/20221120/6cf84d9ad2f84e56835dec66720acbbf.png
相关 HTML/CSS 锚点轮播图 HTML/CSS 锚点轮播图 方法一： <!DOCTYPE html> <html lang="en"> <head> 爱被打了一巴掌/ 2023年01月01日 15:51/ 0 赞/ 216 阅读
相关 轮播图 ![这里写图片描述][SouthEast] > html页面 <!DOCTYPE html> <html> <head> 布满荆棘的人生/ 2022年06月05日 09:07/ 0 赞/ 352 阅读
相关 轮播图 <html> <head> <meta name="viewport" id="viewport" content="width=device- 布满荆棘的人生/ 2022年05月29日 03:47/ 0 赞/ 278 阅读
相关 轮播图 点击左右按钮，切换图片。图片的序号也随之变化。 逻辑思维：每次点击按钮时，只需要改变img的“src”属性就可以切换图片。将图片的"src"放在数组中，就可以知道每一张图的位 落日映苍穹つ/ 2022年05月27日 08:16/ 0 赞/ 321 阅读
相关 轮播图 废话不多说，直接上代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" 淩亂°似流年/ 2022年05月23日 09:38/ 0 赞/ 315 阅读
相关 轮播图 方法1 不太完善 html+js代码如下 <!DOCTYPE html> <html lang="en"> <head> 我不是女神ヾ/ 2022年05月13日 08:20/ 0 赞/ 315 阅读
相关 轮播图 本文转载至菜鸟教程，仅做笔记之用，方便自己学习 [菜鸟链接][Link 1] <!DOCTYPE html> <html> <head> 秒速五厘米/ 2021年12月10日 05:57/ 0 赞/ 509 阅读
相关 轮播图 setInterval setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 给需要轮播的图片在js里声明一个变量 以数组的类型 在H 男娘i/ 2021年11月17日 06:32/ 0 赞/ 437 阅读
相关 轮播图 方案1 初始化插件： slides是一款基于jQuery无缝轮播图插件,支持图内元素动画，可以自定义动画类型 html代码 <div class="fullS 末蓝、/ 2021年06月10日 20:38/ 0 赞/ 654 阅读
爱被打了一巴掌
布满荆棘的人生
淩亂°似流年
柔情只为你懂
还没有评论，来说两句吧...