【轮播图】使用bootstrap轮播插件（Carousel）

最新推荐文章于 2024-09-25 11:25:05 发布

qq_58460470

最新推荐文章于 2024-09-25 11:25:05 发布

阅读量1.1k

点赞数 2

文章标签： bootstrap css html

本文链接：https://blog.csdn.net/qq_58460470/article/details/125118797

版权

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。内容是足够灵活的，可以是图像、内嵌框架、视频或者其他想要放置的任何类型的内容。

源代码

<!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">
    <title>轮播图</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/
     popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
  .carousel-inner img {
    width: 100%;
    height:auto;
    z-index: 1;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins',sans-serif;
}
    </style>
</head>
<body>
            <!--轮播图-->
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
 
                <!-- 指示符 -->
                <ul class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                  <li data-target="#myCarousel" data-slide-to="1"></li>
                  <li data-target="#myCarousel" data-slide-to="2"></li>
                  <li data-target="#myCarousel" data-slide-to="3"></li>
                  <li data-target="#myCarousel" data-slide-to="4"></li>
                </ul>
               
                <!-- 轮播图片 -->
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="">
                  </div>
                  <div class="carousel-item">
                    <img src="">
                  </div>
                  <div class="carousel-item">
                    <img src="">
                  </div>
                  <div class="carousel-item">
                    <img src="">
                  </div>
                  <div class="carousel-item">
                    <img src="">
                  </div>
                </div>

              <!-- 左右切换按钮 -->
            <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
              </a>
              <a class="carousel-control-next" href="#myCarousel" data-slide="next">
                <span class="carousel-control-next-icon"></span>
              </a>
             
            </div>
      </div>
                <script>
                    $('.carousel').carousel({
                    interval: 2000,
                    pause: null,
                    wrap:true
                })    //自动轮播
                    $(function(){
                       // 初始化轮播
                       $(".start-slide").click(function(){
                          $("#myCarousel").carousel('cycle');
                       });
                       // 停止轮播
                       $(".pause-slide").click(function(){
                          $("#myCarousel").carousel('pause');
                       });
                       // 循环轮播到上一个项目
                       $(".prev-slide").click(function(){
                          $("#myCarousel").carousel('prev');
                       });
                       // 循环轮播到下一个项目
                       $(".next-slide").click(function(){
                          $("#myCarousel").carousel('next');
                       });
                       // 循环轮播到某个特定的帧
                       $(".slide-one").click(function(){
                          $("#myCarousel").carousel(0);
                       });
                       $(".slide-two").click(function(){
                          $("#myCarousel").carousel(1);
                       });
                       $(".slide-three").click(function(){
                          $("#myCarousel").carousel(2);
                       });
                    });
                
                 </script>
</body>
</html>

效果图

一、通过用data属性

使用data属性可以很容易控制轮播的位置。

1、属性data-slide接受关键字pre或next，来改变轮播图相对于当前位置的位置。

2、使用data-slide-to来向轮播传递一个原始滑动索引，data-slide-to="2"将把滑块移动到一个特定的索引，索引从0开计数。

3、data-ride="carousel"属性用于标记轮播在页面加载时就开始动画播放了。

二、通过JavaScript来加以修饰轮播效果

轮播可以通过JavaScript手动调节

下面是一些通过data属性或JavaScript来传递的选项

选项名称	类型/默认值	data属性名称	描述
interval	number 默认值：5000	data-interval	自动循环每个项目之间延迟的的时间量。如果为false,轮播将不会自动循环。
pause	string 默认值："hover"	data-pause	鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrap	boolean 默认值：true	data-wrap	轮播是否连续循环。

下面是一些轮播插件中的有用方法：

方法	描述	实例
.carousel(options)	初始化轮播为可选的options对象，并开始循环项目。	$('#identifier').carousel({ interval: 1000 })
.carousel('cycle')	从左到右循环轮播项目。	$('#identifier').carousel('cycle')
.carousel('pause')	停止轮播项目。	$('#identifier').carousel('pause')
.carousel(number)	循环轮播到某个特定的帧（从0开始计数，与数组类似）。	$('#identifier').carousel(number)
.carousel('prev')	循环轮播到上一个项目。	$('#identifier').carousel('prev')
.carousel('next')	循环轮播到下一个项目。	$('#identifier').carousel('next')