carousel
bootscrap
直接看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="/jquery-2.0.0.min.js"></script>
<script src="/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<title>轮播图</title>
<style>
#mycarousel {
/* 这里可以设置轮播图的大小 尽量与图片的宽度一样 */
width: 600px;
height: 400px;
}
</style>
</head>
<!-- 默认是：每5秒播放一次 -->
<body>
<!-- 定义一个容器 -->
<div class="container" id="mycarousel">
<!-- 定义一个；轮播图 换灯片 并且定义一个id-->
<!-- 如果在这里定义的话：interval: 2000, 则需要手动开启一次，才会自动播放-->
<div class="carousel slide" id="js-carousel">
<!-- 定义一个 ：轮播图-指示器 -->
<ol class="carousel-indicators">
<!--data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标， -->
<!-- 使用 data-slide-to 来向轮播床底一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。 -->
<li data-targe="#js-carousel" data-slide-to="0" class="active"></li>
<li data-targe="#js-carousel" data-slide-to="1" class=""></li>
<li data-targe="#js-carousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="/Iimage/1.jpg" alt="">
<!-- 图片的描述可以用：carousel-caption -->
<div class="carousel-caption">
<h4>轮播1</h4>
</div>
</div>
<div class="item ">
<img src="/Iimage/1.jpg" alt="">
<div class="carousel-caption">
<h4>轮播2</h4>
</div>
</div>
<div class="item ">
<img src="/Iimage/1.jpg" alt="">
<div class="carousel-caption">
<h4>轮播3</h4>
</div>
</div>
</div>
<!-- 定义2个 左右切换控件-->
<!-- data-slide="prev":展示轮播图的前一页 -->
<a href="#js-carousel" class="left carousel-control" data-slide="prev">
<!-- span 中的类到bootscript官网组件查看 -->
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<!-- data-slide="prev":展示轮播图的后一页 -->
<a href="#js-carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!-- 初始化 -->
<!-- 这里的轮播图不用初始化 -->
<script>
// $('.carousel').carousel();
</script>
<!-- carousel：属性 设置
interval
pause
wrap
keyboard
-->
<script>
$("#js-carousel").carousel({
// 注意这里的单位都是毫秒
interval: 2000,
})
</script>
</body>
</html>
演示效果：