Bootstrap焦点轮播图

2024-05-11 04:34:19

Bootstrap焦点轮播图

焦点轮播图

所谓的焦点轮播图就是，点击图片左右两边的箭头或者是下面的1、2、3、4、5、6的数字图标时，图片进行切换的效果。

基本用法

1.布局与样式

整个焦点轮播图由三部分组成，图片列表、小圆圈的列表、左右两个按钮。图片宽度默认是600x400的像素。

1）新建一个web项目ch28，将ch27的css、js、demo01.html等文件拷贝过来。再打开demo01.html将上节课在body里面写到的内容删除掉。

2）将桌面上准备好的三张图移动到ch28的img文件里面。

3）焦点轮播图的实例

<body>

<div class="container">

<div class="row">

<div class="col-md-3">

<div data-ride="carousel" id="carousel_container" class="carousel slide">

//首先定义一个焦点图的容器，给这个容器一个id，在这个容器上一定要添加一个样式。

//另外，需要在最外层容器上要添加一个自定义属性data-ride="carousel"使得，页面加载完后马上开始图的轮播。

//注意：最外层是我们整个焦点图的容器！

<div class="carousel-inner">

<div class="item"><img src="img/pic01.jpg"/></div>

<div class="item active"><img src="img/pic02.jpg"/></div>

<div class="item"><img src="img/pic03.jpg"/></div>

</div>

<ol class="carousel-indicators">

<li data-slide-to="0" data-target="#carousel_container"></li>

//data-ride="carousel"在我们小圆圈容器的列表项上给

<li data-slide-to="1" data-target="#carousel_container"></li>

<li data-slide-to="2" data-target="#carousel_container"></li>

</ol>

<a href="#carousel_container" data-slide="prev" class="left carousel-control">

<span class="glyphicon glyphicon-chevron-left"></span>

//可自己到bootstrap中文网的组件中选择想要的图标

</a>

<a href="#carousel_container" data-slide="next" class="right carousel-control">

//左右按钮的时候，要给定一个自己的属性叫data-slide和data-slide="prev"就是显示下一张和返回上一张。

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>

</div>

<div class="col-md-9"></div>

</div>

4）运行效果

自定义属性

1.data-ride=’carousel’

在整个焦点图的容器上添加，表示页面加载完之后就开始轮播。

2.data-slide=’prev|next’

在左右按钮上添加可以给next和prev

3.data-slide-to=’3’

在小图标的每个选项上加它

4.data-interval=’5000’

自动循环时间，每隔多长时间切换一张图。

5.data-pause=”hover”

表示当鼠标移到这张图上的时候就不再进行轮播了，否则的话它自动的在切换。

6.data-wrap=’true’

是否持续循环

7.注意：上面的属性可以写在左右按钮上也可以写在最外层容器上

Javascript用法

1.$(‘.carousel’).carousel()

2..carousel(‘cycle’) 默认从左到右

3..carousel(‘pause’) 暂停

4..carousel(‘number’) 循环到number

5..carousel(‘prev’) 返回到前一张

6..carousel(‘next’) 转到下一张

7.我们可以在bootstrap的中文网站上查看详细的使用方法。

事件

1.slide.bs.carousel slide方法后，还未开始下张图。

2.Slide.bs.carousel 在一张图结束后

3.$(‘#myCarousel’).on(‘slide.bs.carousel’,

function(）｛

//do something...

｝)

4.我们可以在bootstrap的中文网站上查看详细的使用方法。

5.轮播图上显示标题

<div class="item">

<img src="img/pic01.jpg"/>

<div class="carousel-caption">

<h4>标题</h4>

<p>这里是内容。。。。。</p>

</div>

</div>

//做轮播图的时候一般不携带内容。

6.运行效果

Bootstrap焦点轮播图相关推荐

聊一聊 bootstrap 的轮播图插件
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式引入js ...
如何使用bootstrap实现轮播图？
大家好,我是雄雄,今天给大家分享的是如何使用bootstrap实现轮播图,美观大方且兼容性还好! 轮播图就不做过多的介绍了,大家都知道,只是轮播的实现有多种方式,例如使用纯js写,费时费力,且还不适用 ...
仿优酷视频焦点轮播图布局html页面前端源码
大家好,今天给大家介绍一款,仿优酷视频焦点轮播图布局html页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 可以用菜单控制切换(图2) 图2 整体布局简洁明了,干净简单(图3) 图3 代 ...
使用Bootstrap做轮播图
什么是Bootstrap? - Bootstrap 是当下最流行的前端框架(界面工具集): -特点就是灵活简洁,代码优雅,美观大方: - 其目的是为了让 Web 开发更敏捷: - 是 Twitte ...
Bootstrap之轮播图
2019独角兽企业重金招聘Python工程师标准>>>  Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除 ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件
还记的我上篇文章实现了图片响应式滑动,如果不知道怎样实现图片在超宽屏幕居中显示,且也不知道怎样实现图片的响应式效果(专门针对移动端的),可以再继续看看我写的这篇文章.狠狠地点击这里那么针对移动端,如 ...
bootstrap实现轮播图
<html> <head><title>Bootstrap 轮播</title><link rel="stylesheet" ...
bootstrap实现轮播图 --设置图片大小等于父容器大小
运行前需要首先引入bootstrap 和jquery文件并修改图片路径 <!DOCTYPE html> <html><head><meta charset=& ...

最新文章

热门文章