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练习笔记-轮播图的更多相关文章

  1. js轮播图和bootstrap中的轮播图

    js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...

  2. (新手向)基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  3. Bootstrap插件-carousel(轮播图)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 移动web——bootstrap响应式轮播图

    基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...

  5. JS学习笔记--轮播图效果

    希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

  6. bootstrap 学习笔记 轮播(Carousel)插件

    Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除些之外,内容也是足够灵活的,可以是图像,内嵌框架,视频或者其他您想要旋转的任何类型的内容. 示例: 下面是不念 ...

  7. Bootstrap 我的学习记录4 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  8. Bootstrap 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  9. Bootstrap 学习笔记 项目实战 响应式轮播图

    左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...

随机推荐

  1. php实现设计模式之 抽象工厂模式

    <?php /*抽象工厂模式:提供一个创建一系统相关或相互依赖对象的接口,而无需指定它们具体的类 * 创建型模式 */ //抽象小米工厂,能制造小米一,小米二 abstract class mi ...

  2. 关系型数据库与NOSQL

    本文转载自: http://www.cnblogs.com/chay1227/archive/2013/03/17/2964020.html(只作转载, 不代表本站和博主同意文中观点或证实文中信息) ...

  3. tomcat 自定义classpath(亲自测试)

    因为一直以来使用tomcat和weblogic作为应用服务器为主,最近在升级新中间件的过程中遇到一个问题,我们的web前端应用现在升级是进行全量包升级的,因为现在的系统架构为前端和后端通过rpc框架交 ...

  4. tomcat远程调试javaweb

    当把一个本地项目部署到远程服务器后有可能出现意想不到错误,这个时候通过远程调试能够更清楚的找到bug所在位置. 目前百度tomcat绝大多数方法都是在startup.sh或者catalina.sh增加 ...

  5. 【转】visio中关于shape属性的修改和读取

    PS:  本文转自: http://blog.sina.com.cn/s/blog_6bcfb9420100wzxf.html visio中都是shape,shape就是一个对象,要想实现对shape ...

  6. javascript的函数

    1.函数的声明 (1) function命令方式 function fn(){}; (2) 函数的表达式 采用变量赋值的方式,function命令后面不带有函数名.如果加上函数名,那么该函数名只在函数 ...

  7. JavaScript基本语法(五)

    BOM 浏览器对象模型 BOM (浏览器对象模型),它提供了与浏览器窗口进行交互的对象. 一.window对象 Window对象表示整个浏览器窗口. 所有浏览器都支持 window 对象.它表示浏览器 ...

  8. 更改Visual Studio 2015 默认的语言设置

    Vs支持多种语言,但有可能创建项目时,默认的开发语言不是你需要的,比如:默认是Visual C++ 你可以通过"工具"----选项----导入和导出设置来修改. 引用: https ...

  9. ArcSDE给Oracle添加SDE函数包

    SDE函数包中包含大量的空间计算分析函数,是我们做空间相关分析的一把利刃(目前好像我们只有这一把),有关SDE函数的使用,请见我空间另外的一篇帖子的附件.按照通常教程,过程是这样的1.找到listen ...

  10. 联想A880 DIY 换触摸屏屏幕

    今年初入手的Lenovo A880手机,由于摔坏了屏幕不过能正常显示,咨询了联想的售后,说触摸屏和显示屏是分离的,换触摸屏需要280左右 为发挥DIY的精神,准备自己来处理这个屏幕 第一步:购买屏幕, ...