的图⽚⼤⼩尽量⼀样
1使⽤ .carousel .carousel-inner .carousel-item构建基本幻灯⽚轮播效果.slide 滑动效果. data-ride="carousel 轮播切换效果
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/1.jpg" class="d-block w-100" alt="111111">
</div>
<div class="carousel-item">
<img src="images/2.jpg" class="d-block w-100" alt="222222">
</div>
<div class="carousel-item">
<img src="images/3.jpg" class="d-block w-100" alt="333333">
</div>
</div>
data-slide-to="0"
data-slide-to="1"
data-slide-to="2"
-->
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>    <li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/1.jpg" class="d-block w-100" alt="111111">    </div>
<div class="carousel-item">
<img src="images/2.jpg" class="d-block w-100" alt="222222">    </div>
<div class="carousel-item">
<img src="images/3.jpg" class="d-block w-100" alt="333333">    </div>
</div>
</div>
<br>
4使⽤.carpisel-caption 给幻灯⽚底加上⼀些字符说明
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/1.jpg" class="d-block w-100" alt="111111">          <div class="carpisel-caption">
js实现轮播图最简代码<h5>⽩⽉光1</h5>
<p>照天涯的两端1</p>
</div>
</div>
<div class="carousel-item">
<img src="images/2.jpg" class="d-block w-100" alt="222222">          <div class="carpisel-caption">
<h5>⽩⽉光2</h5>
<p>照天涯的两端2</p>
</div>
</div>
<div class="carousel-item">
<img src="images/3.jpg" class="d-block w-100" alt="333333">          <div class="carpisel-caption">
<h5>⽩⽉光3</h>
<p>照天涯的两端3</p>
</div>
</div>
</div>
</div>
</div>
5添加 .carousel-fade 设置播放幻灯⽚时渐进式轮播效果 -->
<div class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/1.jpg" class="d-block w-100" alt="111111">
</div>
<div class="carousel-item">
<img src="images/2.jpg" class="d-block w-100" alt="222222">
</div>
<div class="carousel-item">
<img src="images/3.jpg" class="d-block w-100" alt="333333">
</div>
</div>
</div>
6 通过JS控制，来设置轮播的各项数值，代替data-ride=”carousel” -->
<div id="carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/1.jpg" class="d-block w-100" alt="111111">
</div>
<div class="carousel-item">
<img src="images/2.jpg" class="d-block w-100" alt="222222">
</div>
<div class="carousel-item">
<img src="images/3.jpg" class="d-block w-100" alt="333333">
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">      <span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
<script type="text/javascript">
$(".carousel").carousel({
//轮播间隔500毫秒
Interval:500
});
</script>
7通过JS控制，使⽤按钮来控制轮播器的各项操作
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/1.jpg" class="d-block w-100" alt="111111">
</div>
<div class="carousel-item">
<img src="images/2.jpg" class="d-block w-100" alt="222222">
</div>
<div class="carousel-item">
<img src="images/3.jpg" class="d-block w-100" alt="333333">
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
<button class="button">停⽌</button>
<script type="text/javascript">
$(".button").click(
function(){
//开始播放
/*$(".carousel").carousel("cycle");*/
/
/停⽌播放
$(".carousel").carousel("pause");
//上⼀张
/*$(".carousel").carousel("prve");*/
//下⼀张
/*$(".carousel").carousel("next");
*/
//轮播到指定的图⽚
/*$(".carousel").carousel(2);*/
});
</script>
data-interval = 2000  //设置⾃动变化的时间（毫秒）
data-pause = "hover"  //⿏标放上去会停⽌轮播默认的是hover
data-wrap="true"      //设置是不是循环轮播布尔类型的，true或者false
<span >data-slide-to="1"      //设置下⾯的圆点是不是可以直接点击切换</span>
<span >data-slide="next"      //设置该区域被点击是执⾏向前还是向后的操作  prev  next</span> ``

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。