Bootstrap 轮播（Carousel）插件——记录js技能

ゞ浴缸里的玫瑰 2021-09-07 20:36 486阅读 0赞

最近在做官网，需要在`banner`图部分添加一个轮播图，之前代码是用`bootstrap`的轮播插件，我已经很久没有接触过`bootstrap`了，所以很不熟悉这个了……

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
看到这个代码，我有点看不懂，不知道怎么添加图片。

百度后查找到相关文档：  
[bootstrap官网轮播图：https://blog.csdn.net/qq15577969/article/details/79886669][bootstrap_https_blog.csdn.net_qq15577969_article_details_79886669]

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

如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

下面是一个简单的幻灯片，使用 Bootstrap 轮播（Carousel）插件显示了一个循环播放元素的通用组件。为了实现轮播，您只需要添加带有该标记的代码即可。不需要使用 data 属性，只需要简单的基于 class 的开发即可。

## 实例代码 ##

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

## 用法 ##

通过 `data` 属性：使用 `data` 属性可以很容易控制轮播（`Carousel`）的位置。  
属性 `data-slide` 接受关键字 `prev` 或 `next`，用来改变幻灯片相对于当前位置的位置。  
使用 `data-slide-to` 来向轮播传递一个原始滑动索引，`data-slide-to="2"`将把滑块移动到一个特定的索引，索引从 0 开始计数。  
`data-ride="carousel"` 属性用于标记轮播在页面加载时就开始动画播放。  
通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：  
`$('.carousel').carousel() ('.carousel').carousel()`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

## js部分代码 ##

$(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);
            });
        });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/1e8fb60c43d244788f9b7c3146a188a8.png
[bootstrap_https_blog.csdn.net_qq15577969_article_details_79886669]: https://blog.csdn.net/qq15577969/article/details/79886669
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/71eb1db9540542fbb13248f4768a8972.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/1e9daaae5e46471384bbfe435b68fd73.png