Bootstrap教程(26)–轮播的实现

逃离我推掉我的手 2022-11-09 11:23 188阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 概述
 *  2. 基本轮播
 *  3. 添加轮播指示器
 *  4. 添加轮播控件
 *  5. 小结

# 1. 概述 #

要想从头到尾来实现一个比较好看且稳定的轮播控件，还是有一定难度的。

一个好看的轮播，能瞬间提高网站的整体档次，很多购物网站或者视频网站在首页最显眼的位置，都是放置轮播大图组件。

如果是使用Bootstrap框架的话，开发一个轮播就非常容易了，因为Bootstrap已内置轮播组件，拿来即用即可。

本节我们就来学习下Boostrap的轮播组件。

# 2. 基本轮播 #

先上代码如下：

解释下：

1.  `carousel slide`表示这是一个轮播组件，`data-ride="carousel"`是告诉JS，该组件的内容时用于动态轮播的。
2.  `carousel-inner`表示轮播的内容部分。
3.  `item`表示轮播中的一个条目，在本实例中轮播有两个条目，每个条目都是一个带标题的图片。
4.  `item active`追加了active类，表示当前条目是活跃的，即当前显示在用户面前的。
5.  每个条目中放置了一个图片，然后携带一个标题，标题用`carousel-caption`修饰。

所以如上简单的一些代码就生成了一个基本的轮播效果，注意图片会自动切换。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

# 3. 添加轮播指示器 #

轮播指示器就是轮播条目下面的圆点，可以通过点击圆点切换条目，在`<div id="carousel-demo">`内添加如下代码：

解释下：

1.  `carousel-indicators`表示当前元素时轮播指示器样式。
2.  `data-target="#carousel-demo"`表示指示器对应的是id为carousel-demo的轮播组件。
3.  `data-slide-to="0"`表示点击该指示器时，跳到第0个条目。

添加指示器后效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]

# 4. 添加轮播控件 #

有时候除了指示器，还会为轮播添加上一个、下一个的指示控件，代码如下：

<a class="left carousel-control" href="#carousel-demo" data-slide="prev">
                           <span class="glyphicon glyphicon-chevron-left"></span>
                           <span class="sr-only">Previous</span>
                       </a>
                       <a class="right carousel-control" href="#carousel-demo" data-slide="next">
                           <span class="glyphicon glyphicon-chevron-right"></span>
                           <span class="sr-only">Next</span>
                       </a>

注意通过`href`属性关联轮播组件，通过`data-slide`属性指示点击控件后的动作类型。效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 2]

# 5. 小结 #

Bootstrap轮播功能全面，实现简单，值得推荐！

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/fc293ac6a4a544389768a87a324dc980.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221023/569b40b7efb84d8fb9f45c6651532f33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221023/91fa3a733faa4872bc144f46cd4c2945.png