基于BootStrap的轮播图
准备
先设计一个承载轮播图的区域:四周向外阴影、扁平圆角:
1 #myShuffArea{
2 width: 50%;
3 height: 300px;
4 border: solid 1px gainsboro;
5 border-radius:5%;
6 /*x:0,y:0就是四周*/
7 box-shadow: 0px 0px 10px 5px lightgrey;
8 }
向该区域内放入轮播内容:
1 <body>
2 <div class="container">
3 <!--自己定义的收容轮播的区域-->
4 <div id="myShuffArea">
5 <div id="myCarousel" class="carousel slide" data-ride="carousel">
6 <!--轮播指标-->
7 <ol class="carousel-indicators">
8 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
9 <li data-target="#myCarousel" data-slide-to="1" ></li>
10 <li data-target="#myCarousel" data-slide-to="2" ></li>
11 </ol>
12 <!--轮播项目-->
13 <div class="carousel-inner">
14 <div class="item active">
15 <img src="../img/feichang/bbbg.jpg" alt="图1"/>
16 </div>
17 <div class="item">
18 <img src="../img/login/bg.jpg" alt="图2"/>
19 </div>
20 <div class="item">
21 <img src="../img/login/touxiang.jpg" />
22 </div>
23 </div>
24 <!-- 轮播(Carousel)导航 -->
25 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
26 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
27 <span class="sr-only">Previous</span>
28 </a>
29 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
30 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
31 <span class="sr-only">Next</span>
32 </a>
33 </div>
34 </div>
35 </div>
36 <!--修改延迟事件:变快-->
37 <script>
38 $(function(){
39 $('#myCarousel').carousel({interval:2000});
40 })
41 </script>
42 </body>
基于BootStrap的轮播图的更多相关文章
- 基于bootstrap的轮播广告页,带图片和文字
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- Bootstrap中轮播图
Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...
- 聊一聊 bootstrap 的轮播图插件
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式 引入js ...
- 基于css制作轮播图的部分效果
在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...
- Bootstrap实现轮播图
第一步:设计轮播图容器:div.carousel,添加slide平滑切换,并定义id,方便后面采用data属性来触发 <div class='carousel slide' id="t ...
- ⒃bootstrap组件 轮播图 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于skitter的轮播图炫酷效果,幻灯片的体验
概述 包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端 详细 代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...
- JS 基于面向对象的 轮播图1
---恢复内容开始--- 1 'use strict' 2 function Tab(id){ 3 if(!id)return; 4 this.oBox = document.getElementBy ...
- JS 基于面向对象的 轮播图2
<script> // 函数不能重名, --> 子函数 // is defined function --> 函数名是否写错了 function AutoTab(id) { T ...
随机推荐
- promise例题
let promise = new Promise(resolve => { console.log('Promise'); resolve(); }); promise.then(functi ...
- Ecplise项目导入IDEA(纯小白名词解释)
1. Module 模块 一个大的项目不仅仅是只有Java的源文件,还有数据库,服务器,web等等文件一起使用,将类似于这样分类的文件定义为 module 例如 core Module(核心).web ...
- Shell中的运算
1.运算方式及运算符号 2.SHELL 中常用的运算命令 3.相关操作演示 1.用脚本写一个10秒倒计时 脚本的执行: 2.编写脚本,1分10秒的倒计时 执行脚本: 3.编写脚本,制作一个计算器 脚本 ...
- Shell脚本基础及基本常用命令
1.概述 脚本语言(shell.python):解释性语言,用解释器解释 运行效率低 | c.java:描述性语言,运行效率高 以.sh结尾会有高亮显示 执行: sh hello.sh 或者 chmo ...
- 一文读懂Lua元表
元表 Lua语言中的每种类型的值都有一套可预见的操作集合.例如,我们可以将数字相加,可以连接字符串,还可以在表中插入键值对等,但是我们无法将两个表相加,无法对函数作比较,也无法调用一个字符串,除非使用 ...
- Python - 进度条库 tqdm
前言 在写生成器的时候,网上看到一个进度条库,感觉蛮有意思,记录下 这个库感觉只有在调试的时候会用到,不做深入学习 内置库,不需要安装 示例代码 from tqdm import tqdm for i ...
- python库--pandas--MultiIndex
*表示后面会重复用到此参数 创建层次化索引 pd.MultiIndex 构造器 MI levels 每个级别不重复的标签 labels 每个级别的整数指定每个位置 *sortorder=None ...
- Playfield 类方法的注释
前言 本篇随笔的底包采用的是百度炉石兄弟吧20200109折腾版中自带的 routines 文件. 本次仅为绝大多数方法添加 xml 注释和简单解析,没有具体解析与重构. Playfield 类方法众 ...
- TypeScript与面向对象
目录 1.引 2.类(class) 3.构造函数和this 4.继承 5.super 6.抽象类 7.接口 8.属性的封装 9.泛型 1.引 简而言之就是程序之中所有的操作都需要通过对象来完成.一切操 ...
- 学习了解PHP中的SeasLog日志扩展
今天来学习的扩展是和日志相关的一个扩展,对于 PHP 的日志应用来说,除了本身自带的 error_log() . syslog() 之外,在大多数的框架中还会经常见到 monolog 的踪影.当然,我 ...