利用bootstrap实现图片Carousel效果
引入头文件:
<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效果的更多相关文章
- 利用bootstrap写图片轮播
利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...
- 利用jqueryzoom实现图片放大镜效果
在你的页面中包含 jqzoom.css <link rel="stylesheet" href="your_path/jqzoom.css" type=& ...
- flash8中利用遮罩制作图片切换效果
http://www.56.com/w73/play_album-aid-8642763_vid-NDY5ODU2Mzg.html
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- Android 利用TimerTask实现ImageView图片播放效果
在项目开发中,往往 要用到图片播放的效果.今天就用TimerTask和ImageView是实现简单的图片播放效果. 当中,TimerTask和Timer结合一起使用.主要是利用TimerTask的迭代 ...
- Bootstrap 实现图片翻滚
今天给大家带来的是Bootstrap 实现的图片翻滚 效果图如下 点击左右箭头可以实现向左向右转动,这个功能在Bootstrap 官网和菜鸟教程上都有讲解,有点bootstrap基础的都能看明白 ,这 ...
- 利用Photoshop修改图片以达到投稿要求
摘自:http://www.dxy.cn/bbs/thread/8602152#8602152 利用Photoshop修改图片以达到投稿要求 软件版本为Photoshop CS V8.0.1(中文版) ...
- Jquery实现图片轮换效果
最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...
- 浅谈图片蒙版效果-webkit-mask
会用PS的童鞋一定知道“蒙版”的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果. 大家对-web ...
随机推荐
- LeetCode 122.买卖股票的最佳时机(C++)
给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必须在再次 ...
- 《nginx 四》双机主从热备
lvs+keepalived+nginx实现高性能负载均衡集群 LVS作用 LVS是一个开源的软件,可以实现传输层四层负载均衡.LVS是Linux Virtual Server的缩写,意思是Linux ...
- IT方面书籍下载整理
最近翻看Redis相关的中文书籍时,发现了很多错误,包括翻译错误及理论错误,因此想搜集一些相关的外文书籍看看.以下几个链接,内容大同小异,均可免费下载相关的英文书籍PDF版,内容涵盖了IT的方方面面. ...
- mysql存储过程游标加计划任务事件调度器
存储过程加事件调度器 -- 存储过程 (多个)游标的使用 临时表的使用(让执行时间从一个小时降低到5分钟)DELIMITER $$ DROP PROCEDURE IF EXISTS `eval_cal ...
- fiddler filters 使用(fiddler只显示指定请求,fiddler不显示指定请求,即filter请求过滤)(转)
fiddler filters 使用(fiddler只显示指定请求,fiddler不显示指定请求,即filter请求过滤) Fiddler 有一个filters可以很好的帮助我们只显示我们关系的请求或 ...
- SAP常用函数
1.获取月末最后一天日期 DATA LAST_DATE TYPE SY-DATUM. CALL FUNCTION 'LAST_DAY_OF_MONTHS' EXPORTING day_in = sy- ...
- SpringCloud的学习记录(6)
这一章节讲fegin的使用. 在我们生成的Demo项目上右键点击New->Module->spring Initializr, 然后next, 填写Group和Artifact等信息, 这 ...
- 学习lucene5.5.4的笔记
说说几个常用的类. OpenMode是一个枚举类,有三个元素,分别表示IndexWriter的打开模式. CREATE:每次打开IndexWriter时清空当前索引目录下的索引,再新建索引. APPE ...
- SaaS “可配置”和“多租户”架构的几种技术实现方式
1.数据存储方式的选择 多租户(Multi-Tenant ),即多个租户共用一个实例,租户的数据既有隔离又有共享,说到底是要解决数据存储的问题. 常用的数据存储方式有三种. 方案一:独立数据库 一 ...
- http缓存基本介绍
https://www.helloweba.com/view-blog-414.html