HTML/CSS轮播图 川长思鸟来 2022-12-31 13:18 185阅读 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> /* * { margin: 0; padding: 0; } */ ul { margin: 0; padding: 0; list-style-type: none; } .nav { width: 1130px; height: 286px; /* border: 1px solid red; */ margin: 0 auto; /*overflow: hidden; 是给老大的*/ overflow: hidden; position: relative; } .nav ul { position: absolute; width: 5650px; height: 286px; /* border: 1px solid green; */ } .nav ul li { float: left; } .nav .photo li img { width: 1130px; height: 286px; } .arrow-left, .arrow-right { position: absolute; width: 42px; height: 70px; /* border: 1px solid yellow; */ top: 50%; background-image: url(./img/imgs/icon-slides.png); } .arrow-left { margin-top: -35px; background-position: -84px 0px; } .arrow-right { margin-top: -35px; margin-left: 1089px; background-position: -124px 0px; } .nav:hover .arrow-left{ background-position: 0px 0px; } .nav:hover .arrow-right{ background-position: -42px 0px; } .below-button { position: absolute; top: 90%; margin-left: 45%; width: 100px; height: 10px; /* background-color: red; */ } .below-button div { float: left; width: 10px; height: 10px; margin: 0 5px; background-color: rgba(0, 0, 0, .3); } .below-button div.active { background-color: #fff; } </style> </head> <body> <div class="nav"> <ul class="photo"> <li> <a href="#"> <img src="./img/imgs/0121365f23ed70a80120a82197289b.png" alt=""> </a> </li> <li> <a href="#"> <img src="./img/imgs/012f595f23ab03a80120a8218c8e64.png" alt=""> </a> </li> <li> <a href="#"> <img src="./img/imgs/0148a25f23aaf6a801215aa038b8a3.png" alt=""> </a> </li> <li> <a href="#"> <img src="./img/imgs/0149115f23ab31a80120a8212535f0.png" alt=""> </a> </li> <li> <a href="#"> <img src="./img/imgs/015e9c5f23ab15a801215aa0795d4e.png" alt=""> </a> </li> </ul> <span class="arrow-left"></span> <span class="arrow-right"></span> <div class="below-button"> <div class="active"></div> <div class="active"></div> <div></div> <div></div> <div></div> </div> </div> </body> </html> 显示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]: /images/20221120/67c8e12c40a846d7a7ebc6d57b11a0af.png
相关 html script轮播图,javascript简单轮播图 \\轮播图实现原理： 通过多张图片平铺，用overflow:hidden只显示一张图片、其他的隐藏，无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。\\![bV ゞ 浴缸里的玫瑰/ 2022年10月06日 13:57/ 0 赞/ 326 阅读
相关 轮播图 ![这里写图片描述][SouthEast] > html页面 <!DOCTYPE html> <html> <head> 布满荆棘的人生/ 2022年06月05日 09:07/ 0 赞/ 393 阅读
相关 轮播图 <html> <head> <meta name="viewport" id="viewport" content="width=device- 布满荆棘的人生/ 2022年05月29日 03:47/ 0 赞/ 317 阅读
相关 轮播图 点击左右按钮，切换图片。图片的序号也随之变化。 逻辑思维：每次点击按钮时，只需要改变img的“src”属性就可以切换图片。将图片的"src"放在数组中，就可以知道每一张图的位 落日映苍穹つ/ 2022年05月27日 08:16/ 0 赞/ 356 阅读
相关 轮播图 废话不多说，直接上代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" 淩亂°似流年/ 2022年05月23日 09:38/ 0 赞/ 362 阅读
相关 轮播图 方法1 不太完善 html+js代码如下 <!DOCTYPE html> <html lang="en"> <head> 我不是女神ヾ/ 2022年05月13日 08:20/ 0 赞/ 354 阅读
相关 轮播图 本文转载至菜鸟教程，仅做笔记之用，方便自己学习 [菜鸟链接][Link 1] <!DOCTYPE html> <html> <head> 秒速五厘米/ 2021年12月10日 05:57/ 0 赞/ 555 阅读
相关 轮播图 setInterval setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 给需要轮播的图片在js里声明一个变量 以数组的类型 在H 男娘i/ 2021年11月17日 06:32/ 0 赞/ 481 阅读
相关 轮播图 方案1 初始化插件： slides是一款基于jQuery无缝轮播图插件,支持图内元素动画，可以自定义动画类型 html代码 <div class="fullS 末蓝、/ 2021年06月10日 20:38/ 0 赞/ 699 阅读
ゞ 浴缸里的玫瑰
布满荆棘的人生
淩亂°似流年
柔情只为你懂
还没有评论，来说两句吧...