栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

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

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

1. 概述

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

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

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

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

2. 基本轮播

先上代码如下:

 				

解释下:

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

所以如上简单的一些代码就生成了一个基本的轮播效果,注意图片会自动切换。

3. 添加轮播指示器

轮播指示器就是轮播条目下面的圆点,可以通过点击圆点切换条目,在内添加如下代码:

    				

解释下:

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

添加指示器后效果如下:

4. 添加轮播控件

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

     
  class="glyphicon glyphicon-chevron-left">
  class="sr-only">Previous
     
     
  class="glyphicon glyphicon-chevron-right">
  class="sr-only">Next
     

注意通过href属性关联轮播组件,通过data-slide属性指示点击控件后的动作类型。效果如下:

5. 小结

Bootstrap轮播功能全面,实现简单,值得推荐!

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号