2.bootstrap练习笔记-轮播图
bootstrap练习笔记-轮播图
1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide
设置id是标识这个div是轮播图,等到li下面的按钮来指向它,当然可以用其他id
Class carousel标识这个是一个轮播图样式 slide表示轮播图的左右两遍有滑动效果
ol>li*3表示有三个图片
ol.carousel-indicators表示是一个指示到轮播图的列表,每一个li有一个与之对应的轮播图
li data-target=”#myCarousel”表示作用的目标是id=”myCarousel”的容器
data-slide-to=’0’标识对应下标为0的图片,也就是第一张图片
class=’active’表示默认的属于激活状态
2.div#myCarousel>div.carousel-inner 表示这里的存放轮播图的图片
div.carousel-inner>div*3 是轮播图对应的三个图片
div.item表示这是一个轮播图中的一个小项
3.<a href=”#myCarsousel” data-slide=”prev” class=’carousel-control left’>&lsaqup;</a>
href=”#myCarsousel” 表示作用的id
data-slide=”prev” 表示向上一页滑动
.carousel-control 标识这是一个轮播图控制器
left表示左滑动,与data-slide结合,向左滑动就去查看上一张图片
4.jquery设置自动播放
5.并且在页面改变大小的时候,两个左右滑动的小图标自动垂直居中
<!--轮播图-->
<div id="myCaroysel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCaroysel" data-slide-to="0" class="active"></li>
<li data-target="#myCaroysel" data-slide-to="1"></li>
<li data-target="#myCaroysel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" style="background:#223240;">
<img src="img/slide1.png" style=”margin:0 auto;”alt="1">
</div>
<div class="item" style="background:#F5E4DC;">
<img src="img/slide2.png" style=”margin:0 auto;”alt="2">
</div>
<div class="item" style="background:#DE2A2D;">
<img src="img/slide3.png" style=”margin:0 auto;”alt="3">
</div>
</div>
<a href="#myCaroysel" style=”font-size:100px;” data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCaroysel" style=”font-size:100px;” data-slide="next" class="carousel-control right">›</a>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
//自动播放
$('#myCaroysel').carousel({
interval:2000,
});
//动态获取图片高度,并且设置垂直居中
$('.carousel-control').css('line-height',$('.carousel-inner img').height()+'px');
//当浏览器窗口大小改变的时候
$(window).resize(function () {
var $height = $('.carousel-inner img').eq(0).height()||
$('.carousel-inner img').eq(1).height()||
$('.carousel-inner img').eq(2).height();
//动态获取图片高度,并且设置垂直居中
$('.carousel-control').css('line-height',$height+'px');
});
});
</script>
但是在BS中,当我们在上一下加入图标
<span class="glyphicon glyphicon-chevron-left"></span>
下一页加入图标
<span class="glyphicon glyphicon-chevron-right"></span>
他就自动识别并响应式居中
代码如下
<a href="#myCaroysel" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#myCaroysel" data-slide="next" class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
//自动播放
$('#myCaroysel').carousel({
interval:2000,
});
});
</script>
其他不变
2.bootstrap练习笔记-轮播图的更多相关文章
- js轮播图和bootstrap中的轮播图
js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...
- (新手向)基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- Bootstrap插件-carousel(轮播图)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动web——bootstrap响应式轮播图
基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...
- JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...
- bootstrap 学习笔记 轮播(Carousel)插件
Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除些之外,内容也是足够灵活的,可以是图像,内嵌框架,视频或者其他您想要旋转的任何类型的内容. 示例: 下面是不念 ...
- Bootstrap 我的学习记录4 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- Bootstrap 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- Bootstrap 学习笔记 项目实战 响应式轮播图
左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...
随机推荐
- php实现设计模式之 抽象工厂模式
<?php /*抽象工厂模式:提供一个创建一系统相关或相互依赖对象的接口,而无需指定它们具体的类 * 创建型模式 */ //抽象小米工厂,能制造小米一,小米二 abstract class mi ...
- 关系型数据库与NOSQL
本文转载自: http://www.cnblogs.com/chay1227/archive/2013/03/17/2964020.html(只作转载, 不代表本站和博主同意文中观点或证实文中信息) ...
- tomcat 自定义classpath(亲自测试)
因为一直以来使用tomcat和weblogic作为应用服务器为主,最近在升级新中间件的过程中遇到一个问题,我们的web前端应用现在升级是进行全量包升级的,因为现在的系统架构为前端和后端通过rpc框架交 ...
- tomcat远程调试javaweb
当把一个本地项目部署到远程服务器后有可能出现意想不到错误,这个时候通过远程调试能够更清楚的找到bug所在位置. 目前百度tomcat绝大多数方法都是在startup.sh或者catalina.sh增加 ...
- 【转】visio中关于shape属性的修改和读取
PS: 本文转自: http://blog.sina.com.cn/s/blog_6bcfb9420100wzxf.html visio中都是shape,shape就是一个对象,要想实现对shape ...
- javascript的函数
1.函数的声明 (1) function命令方式 function fn(){}; (2) 函数的表达式 采用变量赋值的方式,function命令后面不带有函数名.如果加上函数名,那么该函数名只在函数 ...
- JavaScript基本语法(五)
BOM 浏览器对象模型 BOM (浏览器对象模型),它提供了与浏览器窗口进行交互的对象. 一.window对象 Window对象表示整个浏览器窗口. 所有浏览器都支持 window 对象.它表示浏览器 ...
- 更改Visual Studio 2015 默认的语言设置
Vs支持多种语言,但有可能创建项目时,默认的开发语言不是你需要的,比如:默认是Visual C++ 你可以通过"工具"----选项----导入和导出设置来修改. 引用: https ...
- ArcSDE给Oracle添加SDE函数包
SDE函数包中包含大量的空间计算分析函数,是我们做空间相关分析的一把利刃(目前好像我们只有这一把),有关SDE函数的使用,请见我空间另外的一篇帖子的附件.按照通常教程,过程是这样的1.找到listen ...
- 联想A880 DIY 换触摸屏屏幕
今年初入手的Lenovo A880手机,由于摔坏了屏幕不过能正常显示,咨询了联想的售后,说触摸屏和显示屏是分离的,换触摸屏需要280左右 为发挥DIY的精神,准备自己来处理这个屏幕 第一步:购买屏幕, ...