菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!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.3.1/css/bootstrap.min.css"><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/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://file.ai100.com.cn/files/article-thumbnail/original/9d0b8426-569f-4b35-b2d6-54775f4e4444/music.jpg"></div><div class="carousel-item"><img src="https://file.ai100.com.cn/files/article-thumbnail/original/2c58d9b3-a8da-43f5-aa03-4be43684d9f6/earch.jpg"></div><div class="carousel-item"><img src="https://file.ai100.com.cn/files/article-thumbnail/original/4aec5529-4eed-46c2-b387-afdbb610f939/suiyuejinghao.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>
运行结果