轮播图插件

轮播图小插件代码。简单，实用。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"> 
 5     <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
 6     <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
 7     <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 8     <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 9 </head>
10 <body>
11 
12 <div id="myCarousel" class="carousel slide">
13     <!-- 轮播（Carousel）指标 -->
14     <ol class="carousel-indicators">
15         <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
16         <li data-target="#myCarousel" data-slide-to="1"></li>
17         <li data-target="#myCarousel" data-slide-to="2"></li>
18     </ol>   
19     <!-- 轮播（Carousel）项目 -->
20     <div class="carousel-inner">
21         <div class="item active">
22             <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
23         </div>
24         <div class="item">
25             <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
26         </div>
27         <div class="item">
28             <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
29         </div>
30     </div>
31     <!-- 轮播（Carousel）导航 -->
32     <a class="carousel-control left" href="#myCarousel" 
33        data-slide="prev">&lsaquo;</a>
34     <a class="carousel-control right" href="#myCarousel" 
35        data-slide="next">&rsaquo;</a>
36 </div> 
37 
38 </body>
39 </html>

效果图如下：

引用来源：http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-carousal-simple

相关阅读:
vite.config.ts：下载相关依赖还是报没有相关声明错误前端
vue3开发(第一期)：Vite2.0+Typescript+Vue3.2 前端
Gitlab私有npm包构建前端
创建.eslintrc.js文件前端
vite2+Vue3+elementPlus+eslint
快捷获取视频首页第一帧
js 动画补间 Tween
js 图片查看器
javascript3d编辑器例子three.jsTHREE.js
javascript 进度条例子

原文地址：https://www.cnblogs.com/wanlibingfeng/p/6236588.html