Bootstrap图片轮播

最新推荐文章于 2021-02-15 14:53:16 发布
最新推荐文章于 2021-02-15 14:53:16 发布
阅读量666 收藏 3
点赞数 1
分类专栏： 页面相关

Bootstrap提供了carousel插件，实现图片轮播非常方便。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 <style type="text/css">
 img{
 margin:0 auto;
 }
 </style>
</head>
<body>
 
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>
 
 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
 <div class="item active">
 <img src="images/lunbo1.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 <div class="item">
 <img src="images/lunbo2.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 <div class="item">
 <img src="images/lunbo3.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 ...
 </div>
 
 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
 </a>
</div>
</body>
</html>

效果

这里写图片描述

可选参数

  1. 1、data-ride=”carousel”：加上可以自动播放，不加点击后才会播放。
  2. 添加标题 
  3. 标题写在 <div class="carousel-caption"></div>之间 
  4. 例如：
<div class="carousel-caption">
 <h3>果壳推书正式上线</h3>
 <p>好书分享、经验交流</p>
</div>


sunqian_happy
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap 实现轮播图
kid_way的博客
11-07 9260
Carousel /*调整容器大小*/ #myCarousel { width: 600px; } /*调整圆圈链接ol位置*/ .carousel-indicators { bottom: -5px; } /*调整轮播图位置*/ #carousel-example-generic { top: 100px; }
基于Bootstrap框架的图片轮播实现
shoushou71的博客
07-03 1万+
前面介绍过原生的javascript实现图片轮播效果：http://blog.csdn.net/shoushou71/article/details/51628678，本节通过Bootstrap框架实现图片轮播效果。 1.Bootstrap介绍     Bootstrap是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、 CSS、 J
BootStrap实现轮播图
cullinans的博客
12-30 1703
今天学习bootstrap，发现轮播图的实现很强大，于是记录下来，方便自己以后使
【BootStrap】图片轮播
Dream it Possible
04-19 2418
在之前的装修项目里，后期有个滑动预览图片的功能，那时候，整天都在调试页面布局，让我很崩溃，所以，自己并没有接过来做，就回复了负责人一句，不会实现。     “轮播”，不知道大家有没有听过这么一个词。这效果也就是做装修中所说的滑动查看图片，今天才知道，别人原来有个响亮而专业的名字：“轮播”。     下面，就一起来看看如何实现轮播的效果。     项目里前端框架采用的是BootStra
spring boot+bootstrap实现动态轮播图实战
老徐的博客只有干货
12-17 4070
1.bootstrap轮播图 最近开发了个网站需要用到轮播图，正好前端用的事Bootstrap，这里就实战一下。 前提条件： bootstrap4.5 jquery 3张大小适中图片 实现效果： 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-widt
非常酷炫的Bootstrap图片轮播动画
10-22
主要为大家分享了非常酷炫的Bootstrap图片轮播动画，几行jQuery和animate.css库用在基本的Bootstrap轮播组件中，感兴趣的小伙伴们可以参考一下
Bootstrap图片轮播效果详解
08-29
主要为大家详细介绍了Bootstrap图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
轻松实现Bootstrap图片轮播
09-02
Bootstrap图片轮播是网页设计中常见的一种功能，用于展示多张图片或内容，通常用于产品展示、宣传等场景。Bootstrap框架内置的carousel插件提供了一种简单易用的方式来实现这一功能，无需复杂的JavaScript编程，只需...
全面解析Bootstrap图片轮播效果
09-03
Bootstrap图片轮播效果是一种常见的网页动态展示技术，尤其在网站的首页或产品展示区域广泛使用。Bootstrap是Twitter开发的一个开源的前端框架，它提供了丰富的预定义样式、组件和JavaScript插件，用于快速构建响应...
全面解析多种Bootstrap图片轮播效果
09-02
Bootstrap图片轮播是一种常见的网页元素，它允许用户在有限的空间内展示多张图片或内容，通常用于产品展示、幻灯片或广告等场景。Bootstrap框架提供了内置的轮播组件，使得创建美观且功能丰富的轮播变得简单易行。在...
bootstrap轮播点不动
weixin_33989780的博客
04-13 2745
2019独角兽企业重金招聘Python工程师标准>>> ...
BootStrap轮播图 (自动轮播)
热门推荐
csdn_zy_的博客
09-30 4万+
下面的轮播图已经有了鼠标悬停停止轮播，左右导航，和下方圆点计数器、给图片添加标题，内容等功能 &lt;!--轮播图--&gt; &lt;div class="container" &gt; &lt;div class="carousel slide" id="slidershow" data-ride="carousel" data-interval="200
BootStrap做图片轮播效果（解析）
红岸基地
04-18 1万+
做不同的好看的效果一直是做一个小前端的目标，都希望可以做出不一样的页面，炫酷的页面，但是技术有的时候跟不上的时候只能是模仿，看别人是怎么做的，其实模仿的过程也就是学习的一个过程，能看明白别人的代码也是一种进步，今天就简单的讲述一下如果用bootStrapUI框架做一个图片轮播的效果。实用性很多大的网站都是有的，淘宝、京东、csdn等等...效果预览如果您看过了，我们今天就简单的做那个效果，我看的是...
bootstrap 图片横向滚动条,Bootstrap 4水平滚动条div
weixin_35998791的博客
12-18 466
I got this working for Bootstrap 3 but the same code won't work in Bootstrap 4.Basically, I'm trying to create a horizontal scroll for DIV and here's a working JSFIDDLE for Bootstrap 3 (which I don't ...
bootstrap 图片横向滚动条_带水平滚动条的Bootstrap面板
weixin_39692254的博客
02-15 464
Update your CSS like below您可以根据要滚动的子容器数定义 resultContainer 的with . 因此，如果每个 test-result 的宽度为 150px ，并且您希望容纳 100 这样的容器，则将 resultContainer 的宽度设置为150 x 100，即15000px ..tab-pane{width:100%;overflow: auto;}.r...
java毕设&课设-图书管理系统（完整的）.zip
07-21
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
奇异谱分析SSA做信号分解，信号去噪、分解
最新发布
07-21
奇异谱分析SSA做信号分解，信号去噪、分解 1.运行main文件，其余为子函数 2.可以做回归预测，分类预测，时间序列预测 3.可以做信号分解，算法优化，区间预测 4.可以做组合模型预测 5.可以做聚类
ASP电子政务档案管理系统(源代码+论文).rar
07-21
ASP电子政务档案管理系统(源代码+论文)
bootstrap图片轮播
09-22
Bootstrap图片轮播是一种通过使用Bootstrap框架来实现的图片轮播功能。它可以在网页上展示多张图片，并自动按照设定的时间间隔进行切换。在Bootstrap图片轮播中，可以通过添加图片路径和设置图片的播放顺序来自定义轮播的内容。 要实现Bootstrap图片轮播，首先需要创建一个包含轮播图片的容器，并设置其样式和属性。然后，通过在容器内部添加轮播图片的HTML代码，可以指定每张图片的路径和描述。最后，使用相应的JavaScript代码来初始化和控制轮播功能。 以下是实现Bootstrap图片轮播的基本步骤： 1. 创建一个包含轮播图片的容器，可以使用<div>标签，并为其添加必要的样式和属性，如id、class和data-ride等。 2. 在容器内部，使用<div>标签创建一个轮播项目的集合，可以使用class为carousel-inner来指定样式。 3. 在轮播项目集合中，使用<div>标签创建每个轮播项目，可以使用class为item来指定样式。 4. 在每个轮播项目内部，使用<a>标签来包裹图片，并设置图片的路径和描述。 5. 使用JavaScript代码来初始化和控制轮播功能，可以使用jQuery和Bootstrap提供的API来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值