基于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 ...
随机推荐
- elasticsearch支持大table格式数据的搜索
一.问题源起 数据情况 TableMeta, 保存table的元数据,通过fileId关联具体的GridFS文件: id name creator fileId 1 table1 mango f1 2 ...
- Sentry Web 性能监控 - Trends
系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...
- 在EXCEL中批量添加超链接
在单元格中输入函数 =HYPERLINK(链接位置,[显示文本])
- bash-completion linux命令补全
1.有时候用docker run 或者kubectl 想tab补全的时候用不了 这个时候可以安装一个神奇的包bash-completion yum install bash-completion 2. ...
- Collections集合工具类和可变参数
Collections常用的API: public static <T> boolean addAll(Collection<? super T> c, T... elemen ...
- 机器学习——主成分分析（PCA）
1 前言 PCA(Principal Component Analysis)是一种常用的无监督学习方法,是一种常用的数据分析方法. PCA 通过利用 正交变换 把由 线性相关变量 表示的观测数据转换为 ...
- STM32CbueIDE 与 J-Link
STM32CbueIDE 与 J-Link 无论是 STM32CbueIDE 还是 Keil, 在使用 JLink 的时候都不过是先启 JLink 的 GDB 服务,然后再"远程" ...
- PHP中命名空间是怎样的存在？（三）
这是与命名空间有关的最后一篇.最后还是两个比较简单的内容,是关于命名空间和全局相关的一些类.函数.常量的使用对比.当然,最后我们还会总结一下命名空间的名称解析规则做为这三篇系列文章的结束. 全局空间 ...
- Shell系列（31）- 双分支if语句简介
双分支if条件语句 if [ 条件判断式 ] then 条件成立,执行的程序 else 条件不成立,执行的程序 fi 需求 根据用户输入的目录名,判断是否存在 脚本: #!/bin/bash #使用r ...
- Linux档案权限篇（一）
查看档案的属性"ls-al". 即列出所有的档案的详细权限与属性(包括隐藏文件) 权限 第一个字符代表档案的类型: d:代表是目录 -:代表是文件 l:代表是连接文件(相当于win ...