引入头文件:

<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. Docker学习笔记(2)-docker镜像操作

    本节将会涉及Docker的镜像操作. 1. 获取镜像 如何获取Docker Hub上的镜像?可通过docker pull命令获取,其格式为: docker pull [选项] [Docker Regi ...

  2. Hadoop学习笔记(3) Hadoop I/O

    1. HDFS的数据完整性 HDFS会对写入的所有数据计算校验和,并在读取数据时验证校验和.datanode负责在验证收到的数据后存储数据及其校验和.正在写数据的客户端将数据及其校验和发送到由一系列d ...

  3. 记一次失败的Linux安装

    这次把整个电脑都装了Ubuntu,向Linux这条路越走越远了,也感谢社会对Linux的支持越来越完善了,才让我下定这个决心,再次表示感谢 之前都是装双系统或者在vm下安装的Linux,现在再装一次, ...

  4. AngularJS directive 动态 template

    app.directive('testwindow', function() { return { restrict : 'E', template: '<ng-include src=&quo ...

  5. 一个position为fixed的div,宽高自适应,怎样让它水平垂直都在窗口居中?

    .div{ position: fixed; left: %; top: %; -webkit-transform: translate(-%, -%); transform: translate(- ...

  6. c# 使用泛型序列化

    static void Serialize<T>(T instance , string fileName) { using(XmlWriter writer = new XmlWrite ...

  7. xml解析demo使用

    package lianxi; import java.io.FileOutputStream;import java.io.OutputStreamWriter; import javax.xml. ...

  8. 粗看ES6之数组

    标签: javascript es6 数组新增方法 map(可以理解为是映射,以一定规则修改数组每一项并返回全新数组) reduce(可以理解为是汇总,一堆出来一个) filter(可以理解为过滤,筛 ...

  9. 转:清除arcsde空间垃圾数据以及解决sde图层名称被占用的问题

    因为对空间数据管理的不善(非法的删除.重命名等),导致sde中存在一些垃圾数据.和图层名称被占用,这种问题已经有好几个同事问我怎么解决了?现把这个问题已经解决了,下面将整个详细过程写出来,共享给碰到同 ...

  10. seleniumCSS用法

    http://sauceio.com/index.php/2009/10/selenium-tip-of-the-week-start-improving-your-locators/ http:// ...