引入头文件:

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="jquery-3.3.1.js"></script>

开始写父级Div:

<div id="carouselExampleIndicators" class="carousel slide"
data-ride="carousel" style="height: 400px">
<div>

可通过data-intervel="2000" 来实现图片自动播放间隔为2s

图片下面的“点”:

<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2" class=""></li>
</ol>

图片:

<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-500" src="a.jpg">
</div>
<div class="carousel-item" style="width: 300px;">
<img class="d-block w-500" src="b.jpg">
</div>
<div class="carousel-item" style="width: 300px;">
<img class="d-block w-500" width="500px" height="380px" src="c.jpg">
</div>
</div>

左右播放组件:

<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-500" src="a.jpg">
</div>
<div class="carousel-item" style="width: 300px;">
<img class="d-block w-500" src="b.jpg">
</div>
<div class="carousel-item" style="width: 300px;">
<img class="d-block w-500" width="500px" height="380px" src="c.jpg">
</div>
</div>

注意href要链接父级元素id

利用bootstrap实现图片Carousel效果的更多相关文章

  1. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

  2. 利用jqueryzoom实现图片放大镜效果

    在你的页面中包含 jqzoom.css <link rel="stylesheet" href="your_path/jqzoom.css" type=& ...

  3. flash8中利用遮罩制作图片切换效果

    http://www.56.com/w73/play_album-aid-8642763_vid-NDY5ODU2Mzg.html

  4. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  5. Android 利用TimerTask实现ImageView图片播放效果

    在项目开发中,往往 要用到图片播放的效果.今天就用TimerTask和ImageView是实现简单的图片播放效果. 当中,TimerTask和Timer结合一起使用.主要是利用TimerTask的迭代 ...

  6. Bootstrap 实现图片翻滚

    今天给大家带来的是Bootstrap 实现的图片翻滚 效果图如下 点击左右箭头可以实现向左向右转动,这个功能在Bootstrap 官网和菜鸟教程上都有讲解,有点bootstrap基础的都能看明白 ,这 ...

  7. 利用Photoshop修改图片以达到投稿要求

    摘自:http://www.dxy.cn/bbs/thread/8602152#8602152 利用Photoshop修改图片以达到投稿要求 软件版本为Photoshop CS V8.0.1(中文版) ...

  8. Jquery实现图片轮换效果

    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...

  9. 浅谈图片蒙版效果-webkit-mask

    会用PS的童鞋一定知道“蒙版”的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果. 大家对-web ...

随机推荐

  1. LeetCode 122.买卖股票的最佳时机(C++)

    给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必须在再次 ...

  2. 《nginx 四》双机主从热备

    lvs+keepalived+nginx实现高性能负载均衡集群 LVS作用 LVS是一个开源的软件,可以实现传输层四层负载均衡.LVS是Linux Virtual Server的缩写,意思是Linux ...

  3. IT方面书籍下载整理

    最近翻看Redis相关的中文书籍时,发现了很多错误,包括翻译错误及理论错误,因此想搜集一些相关的外文书籍看看.以下几个链接,内容大同小异,均可免费下载相关的英文书籍PDF版,内容涵盖了IT的方方面面. ...

  4. mysql存储过程游标加计划任务事件调度器

    存储过程加事件调度器 -- 存储过程 (多个)游标的使用 临时表的使用(让执行时间从一个小时降低到5分钟)DELIMITER $$ DROP PROCEDURE IF EXISTS `eval_cal ...

  5. fiddler filters 使用(fiddler只显示指定请求,fiddler不显示指定请求,即filter请求过滤)(转)

    fiddler filters 使用(fiddler只显示指定请求,fiddler不显示指定请求,即filter请求过滤) Fiddler 有一个filters可以很好的帮助我们只显示我们关系的请求或 ...

  6. SAP常用函数

    1.获取月末最后一天日期 DATA LAST_DATE TYPE SY-DATUM. CALL FUNCTION 'LAST_DAY_OF_MONTHS' EXPORTING day_in = sy- ...

  7. SpringCloud的学习记录(6)

    这一章节讲fegin的使用. 在我们生成的Demo项目上右键点击New->Module->spring Initializr, 然后next, 填写Group和Artifact等信息, 这 ...

  8. 学习lucene5.5.4的笔记

    说说几个常用的类. OpenMode是一个枚举类,有三个元素,分别表示IndexWriter的打开模式. CREATE:每次打开IndexWriter时清空当前索引目录下的索引,再新建索引. APPE ...

  9. SaaS “可配置”和“多租户”架构的几种技术实现方式

    1.数据存储方式的选择 多租户(Multi-Tenant ),即多个租户共用一个实例,租户的数据既有隔离又有共享,说到底是要解决数据存储的问题. 常用的数据存储方式有三种. 方案一:独立数据库   一 ...

  10. http缓存基本介绍

    https://www.helloweba.com/view-blog-414.html