Bootstarp4 轮播图 绝地灬酷狼 2021-11-15 12:31 366阅读 0赞 轮播是一个循环的幻灯片： **创建轮播实列** <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> <style> /* Make the image fully responsive */ .carousel-inner img { width: 100%; height: 100%; } </style> </head> <body> <div id="demo" class="carousel slide" data-ride="carousel"> <!-- 指示符 --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- 轮播图片 --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg"> </div> <div class="carousel-item"> <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg"> </div> <div class="carousel-item"> <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg"> </div> </div> <!-- 左右切换按钮 --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </body> </html> ![1354320-20190729112120770-1524712747.png][] ## 轮播图片上添加描述 ## 在每个 <div class="carousel-item"> 内添加 <div class="carousel-caption"> 来设置轮播图片的描述文本： <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> <style> /* Make the image fully responsive */ .carousel-inner img { width: 100%; height: 100%; } </style> </head> <body> <div id="demo" class="carousel slide" data-ride="carousel"> <!-- 指示符 --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- 轮播图片 --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg"> <div class="carousel-caption"> <h3>第一张图片描述标题</h3> <p>描述文字!</p> </div> </div> <div class="carousel-item"> <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg"> <div class="carousel-caption"> <h3>第二张图片描述标题</h3> <p>描述文字!</p> </div> </div> <div class="carousel-item"> <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg"> <div class="carousel-caption"> <h3>第三张图片描述标题</h3> <p>描述文字!</p> </div> </div> </div> <!-- 左右切换按钮 --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </body> </html> ![1354320-20190729112509213-995677268.png][] ### 以上实例中使用的类说明 ### <table> <tbody> <tr> <th><span style="font-size:16px;">类</span></th> <th><span style="font-size:16px;">描述</span></th> </tr> <tr> <td><span style="font-size:16px;"><code>.carousel</code></span></td> <td><span style="font-size:16px;">创建一个轮播</span></td> </tr> <tr> <td><span style="font-size:16px;"><code>.carousel-indicators</code></span></td> <td><span style="font-size:16px;">为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。</span></td> </tr> <tr> <td><span style="font-size:16px;"><code>.carousel-inner</code></span></td> <td><span style="font-size:16px;">添加要切换的图片</span></td> </tr> <tr> <td><span style="font-size:16px;"><code>.carousel-item</code></span></td> <td><span style="font-size:16px;">指定每个图片的内容</span></td> </tr> <tr> <td><span style="font-size:16px;"><code>.carousel-control-prev</code></span></td> <td><span style="font-size:16px;">添加左侧的按钮，点击会返回上一张。</span></td> </tr> <tr> <td><span style="font-size:16px;"><code>.carousel-control-next</code></span></td> <td><span style="font-size:16px;">添加右侧按钮，点击会切换到下一张。</span></td> </tr> <tr> <td><span style="font-size:16px;"><code>.carousel-control-prev-icon</code></span></td> <td><span style="font-size:16px;">与 .carousel-control-prev 一起使用，设置左侧的按钮</span></td> </tr> <tr> <td><span style="font-size:16px;"><code>.carousel-control-next-icon</code></span></td> <td><span style="font-size:16px;">与 .carousel-control-next 一起使用，设置右侧的按钮</span></td> </tr> <tr> <td><span style="font-size:16px;"><code>.slide</code></span></td> <td><span style="font-size:16px;">切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。</span></td> </tr> </tbody> </table> 转载于:https://www.cnblogs.com/gjh99/p/11262925.html [1354320-20190729112120770-1524712747.png]: /images/20211115/43dfec2c6a824887b89180451e8bdf5e.png [1354320-20190729112509213-995677268.png]: /images/20211115/07f53900985e44afa0a5169f0b07e3d4.png
相关 轮播图 ![这里写图片描述][SouthEast] > html页面 <!DOCTYPE html> <html> <head> 布满荆棘的人生/ 2022年06月05日 09:07/ 0 赞/ 369 阅读
相关 轮播图 <html> <head> <meta name="viewport" id="viewport" content="width=device- 布满荆棘的人生/ 2022年05月29日 03:47/ 0 赞/ 295 阅读
相关 轮播图 点击左右按钮，切换图片。图片的序号也随之变化。 逻辑思维：每次点击按钮时，只需要改变img的“src”属性就可以切换图片。将图片的"src"放在数组中，就可以知道每一张图的位 落日映苍穹つ/ 2022年05月27日 08:16/ 0 赞/ 339 阅读
相关 轮播图 废话不多说，直接上代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" 淩亂°似流年/ 2022年05月23日 09:38/ 0 赞/ 340 阅读
相关 轮播图 方法1 不太完善 html+js代码如下 <!DOCTYPE html> <html lang="en"> <head> 我不是女神ヾ/ 2022年05月13日 08:20/ 0 赞/ 333 阅读
相关 轮播图 本文转载至菜鸟教程，仅做笔记之用，方便自己学习 [菜鸟链接][Link 1] <!DOCTYPE html> <html> <head> 秒速五厘米/ 2021年12月10日 05:57/ 0 赞/ 528 阅读
相关 轮播图 setInterval setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 给需要轮播的图片在js里声明一个变量 以数组的类型 在H 男娘i/ 2021年11月17日 06:32/ 0 赞/ 459 阅读
相关 Bootstarp4 轮播图 轮播是一个循环的幻灯片： 创建轮播实列 <!DOCTYPE html> <html> <head> <title>Bootstrap 实 绝地灬酷狼/ 2021年11月15日 12:31/ 0 赞/ 367 阅读
相关 轮播图 方案1 初始化插件： slides是一款基于jQuery无缝轮播图插件,支持图内元素动画，可以自定义动画类型 html代码 <div class="fullS 末蓝、/ 2021年06月10日 20:38/ 0 赞/ 677 阅读
布满荆棘的人生
淩亂°似流年
柔情只为你懂
还没有评论，来说两句吧...